CSS

flex

CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구입니다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았습니다. flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있습니다. 아래 영상에서는 flex가 도입된 배경을 설명합니다. 

이 기술을 현재 사용해도 좋을지는 아래 페이지를 참고하셔요. 

http://caniuse.com/#search=flex

flex의 기본

flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야 합니다. 또한 flex-direction을 이용해서 정렬방향을 바꿀 수 있습니다. 기본은 row입니다. 아래 영상은 flex의 기본적인 사용법을 알려드립니다. 

 

예제 - flex_1_basic

<!doctype>
<html>
<head>
    <style>
        .container{
            background-color: powderblue;
            height:200px;
            display:flex;
            flex-direction:row;
        }
        .item{
            background-color: tomato;
            color:white;
            border:1px solid white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

grow & shrink

아이템은 컨테이너의 크기에 따라서 작아지기도 하고 커지기도 합니다. 이 때 작아지고, 커지는 비율을 지정하는 방법이 바로 grow & shrink입니다. 여기서는 이 속성들에 대해서 알아보겠습니다. 

예제 - flex_2_grow_shrink.html

<!doctype>
<html>
<head>
    <style>
        .container{
            background-color: powderblue;
            height:200px;
            display:flex;
            flex-direction:row;
        }
        .item{
            background-color: tomato;
            color:white;
            border:1px solid white;         
        }
        .item:nth-child(1){
            flex-basis: 150px;
            flex-shrink: 1;
        }
        .item:nth-child(2){
            flex-basis: 150px;
            flex-shrink: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

Holy Grail layout

Holy Grail은 성배라는 뜻입니다. 많은 사람들이 성배를 찾기 위해서 노력했지만 찾지 못한 것처럼 많은 사람들이 아래와 같은 레이아웃을 만들기 위해서 노력했지만 완벽한 방법을 찾지 못했습니다. 이것에 비유해서 이런 레이아웃을 성배 레이아웃이라고 부르곤 합니다. flex는 아주 세련된 방법으로 이 문제를 간편하게 해결합니다. 여기서는 플랙스를 이용해서 성배 레이아웃을 만드는 법을 알아봅니다.  

 

 

예제 - flex_3_holyGrailLayout.html

<!doctype>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .container{
            display: flex;
            flex-direction: column;
        }
        header{
            border-bottom:1px solid gray;
            padding-left:20px;
        }
        footer{
            border-top:1px solid gray;
            padding:20px;
            text-align: center;
        }
        .content{
            display:flex;
        }
        .content nav{
            border-right:1px solid gray;
        }
        .content aside{
            border-left:1px solid gray;    
        }
        nav, aside{
            flex-basis: 150px;
            flex-shrink: 0;
        }
        main{
            padding:10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>생활코딩</h1>
        </header>
        <section class="content">
            <nav>
                <ul>
                    <li>html</li>
                    <li>css</li>
                    <li>javascript</li>
                </ul>
            </nav>
            <main>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam totam labore ipsum, nesciunt temporibus repudiandae facilis earum, sunt autem illum quam dolore, quae optio nemo vero quidem animi tempore aliquam voluptas assumenda ipsa voluptates. Illum facere dolor eos, corporis nobis, accusamus velit, similique cum iste unde vero harum voluptatem molestias excepturi. Laborum beatae, aliquid aliquam excepturi pariatur soluta asperiores laudantium iste, architecto ducimus fugiat sed, saepe quaerat recusandae exercitationem sapiente, impedit nostrum error. Doloremque impedit, eos in quos assumenda illo eum dicta. Voluptatum quaerat excepturi consectetur, doloremque esse deleniti commodi natus, maxime sit? Officia rerum quibusdam porro dolorum numquam harum soluta ex quo! Vero, nam? Necessitatibus rem hic perferendis maiores obcaecati voluptate sunt autem id doloribus, similique repudiandae nesciunt vel facere ex accusantium ipsum provident iste itaque? Perferendis culpa nostrum repellendus dolores repudiandae assumenda, tempora laudantium in quibusdam placeat facilis ex voluptatem provident velit iusto fuga eum nobis deserunt enim minus. Explicabo vel labore, eum doloremque, impedit recusandae aut illum corporis quis atque sit vero quasi tempore placeat ipsam similique quo delectus provident animi distinctio debitis eligendi voluptatum! Dolorem perspiciatis similique non fugit eaque? Commodi suscipit earum aliquam rem, neque ad. Obcaecati nisi beatae officia inventore laborum nostrum natus perspiciatis iste, aperiam vero quisquam saepe labore facilis veritatis illo excepturi vitae autem quis! Voluptatibus atque doloribus perferendis, eligendi ex aliquid debitis laudantium omnis accusamus similique cum mollitia quos adipisci reprehenderit assumenda sequi, dolore tenetur ipsam, odio, vero reiciendis iure. Dolore itaque nesciunt ipsam, id maxime saepe officiis dolorum molestias earum temporibus? Possimus ipsum accusamus quasi minima, quod magnam iusto non cupiditate facilis pariatur aliquam omnis, blanditiis assumenda magni ad voluptas dicta est optio reprehenderit rem ratione earum ipsa, dolor vero! Totam, adipisci eos nihil repellendus. Maiores, blanditiis. Officiis aspernatur iure culpa illo sint ex id perferendis, explicabo architecto ipsa voluptatibus nesciunt pariatur commodi cum quam. Obcaecati ut quidem quam error nemo. Pariatur aliquid autem inventore laboriosam, velit totam, temporibus ad magnam minus, quis nesciunt aperiam veritatis. Vitae porro provident magni eos sit sed dignissimos iure natus odio nostrum molestiae atque mollitia saepe adipisci ut velit quo hic fuga ex, voluptates vel eum ipsum amet, sunt corporis. Maxime odit alias, ratione tenetur, asperiores consequuntur deserunt modi velit ab maiores pariatur voluptates beatae aut nesciunt perspiciatis sed veritatis doloremque quibusdam amet vero. Qui, labore. Atque ratione quae ducimus reprehenderit perferendis nisi earum, debitis commodi maxime sequi facere optio doloribus, repudiandae ex quidem amet iusto inventore quaerat at praesentium sint. Omnis mollitia esse illum suscipit, quis dolorem maxime sunt eaque, autem nisi corrupti perferendis provident tempore quas, unde! Doloribus, at, accusamus, maiores enim amet quod provident temporibus atque, ipsam fugiat incidunt. Quasi iusto ea quibusdam eveniet porro officiis dicta fugiat fugit laudantium ipsum esse quisquam quo laboriosam odit voluptates alias veritatis expedita quidem consectetur eos, impedit, incidunt dolorum? Laborum, facere nulla ullam, aliquid rerum nihil non adipisci, architecto obcaecati iure quam, fuga minus alias eligendi provident ex odio sit. Ducimus, facilis veritatis numquam, maxime quos natus animi, a magnam itaque veniam pariatur sed alias eos quas? Voluptatum fugit doloribus fugiat iste adipisci quidem odit consectetur, sapiente culpa magnam laborum, laboriosam exercitationem cupiditate dignissimos, nisi doloremque hic itaque aspernatur. Ab labore dolorum cumque rem vitae repellat quo quae porro cupiditate minus. Perspiciatis cumque sequi provident fugit. Nulla reiciendis voluptates molestiae corporis voluptate, quidem consequuntur, dolor vero necessitatibus deleniti tempora ab facilis similique, ea error deserunt fuga quia atque omnis nam earum non, illo. Minima quos optio nostrum eos aperiam? Quam, obcaecati velit deserunt tempore, iure vitae repudiandae quos illum quasi esse quas quaerat at consectetur necessitatibus. Cum, quod, dolore voluptatibus quibusdam accusamus aliquam consequatur dolorum illo! Sequi commodi adipisci explicabo soluta necessitatibus magni expedita cumque, officiis voluptas, vel amet recusandae sunt, quidem eum aliquid deleniti unde, impedit non magnam consectetur est minima facere architecto. Molestias cum vero nostrum saepe, dignissimos eius beatae natus fugiat deserunt esse, nesciunt eos ducimus id amet magnam possimus? Optio adipisci quisquam earum totam nemo sunt provident iure ab consectetur et deleniti molestiae blanditiis laudantium, autem consequatur rerum labore ipsa ipsam deserunt nisi, expedita doloremque quibusdam! Illo nemo laborum a sequi in, ad ipsum blanditiis alias! Eaque eos eligendi hic dolorum sint, tempore voluptatum ut numquam. Corporis similique itaque accusantium, esse porro ea dolor, quae consequuntur ullam necessitatibus magni rem optio officiis totam in dicta quas, odio quam blanditiis dolores pariatur? Dolorem, fuga? Harum ratione nemo perspiciatis culpa eum repudiandae esse, atque impedit nihil debitis, assumenda est. Sapiente rerum alias ipsa tempore obcaecati deserunt maiores distinctio officiis itaque fugit optio, eveniet facere amet ipsum, harum laboriosam eius, enim magni blanditiis temporibus nobis consequuntur ut. Quia magnam vero atque modi aspernatur in perferendis voluptas reprehenderit, rerum dolore unde iusto ab non eius molestiae quasi tenetur beatae ipsam quidem, quos at architecto voluptate alias eos. Deserunt velit beatae, ullam, accusantium sit asperiores! A vero perferendis, harum praesentium dolorem deserunt. Numquam voluptas necessitatibus, aliquam ullam saepe harum amet consequatur minima neque officia maxime quo beatae ab aliquid ex placeat rerum unde, reiciendis aspernatur similique, doloremque ad laboriosam modi. Minus quam aperiam, sed aliquid. Fugiat amet harum consequuntur reprehenderit id eum ratione quos temporibus, quae. Ab ut omnis tempora voluptates, sed ea animi voluptatem pariatur quod mollitia corrupti voluptas repellendus consequatur quae adipisci, enim vitae harum nulla natus iusto hic totam officia architecto quam. Debitis dignissimos praesentium, hic. Ad assumenda, aliquid consequuntur dolore eum repudiandae ab explicabo ipsa sed blanditiis. Quidem unde necessitatibus facilis, quis commodi. Dignissimos perferendis, nihil labore corrupti autem cumque ipsum vel voluptatum? Nostrum labore, omnis provident ullam repellendus culpa amet rem consequatur animi, necessitatibus porro. In consequatur optio recusandae, quisquam accusantium at deserunt voluptatem fugit quibusdam neque libero assumenda consectetur numquam ratione quaerat. Quos omnis neque atque, id perferendis possimus, alias, dignissimos doloribus ducimus similique ratione vitae eos laudantium, tempore cupiditate quod consectetur! Voluptas enim laboriosam nesciunt rem. Recusandae beatae numquam asperiores adipisci neque, vel pariatur suscipit provident, a est magni. Laborum dolore incidunt saepe ipsam? Eveniet doloremque animi maxime aliquid rem fugit dolor dignissimos! Quo, ut quod ab.
            </main>
            <aside>
                AD
            </aside>
        </section>
        <footer>
            <a href="https://opentutorials.org/course/1">홈페이지</a>
        </footer>
    </div>
</body>
</html>

flex의 여러 속성들 

댓글

댓글 본문
작성자
비밀번호
  1. 14번째
    5.22.
  2. Eunryeong Cha
    재미있게 잘 공부했어요
  3. 정말 감사합니다 ㅎ
    대화보기
    • php가 첫취업?
      점점 어려워지는 느낌이 드네요...프로그래밍언어를 막 배우기 시작한 느낌이 드는군요 ㅜㅜ
    • reminisce
      덕분에 차근차근 잘 배워나가고 있습니다! 그런데 다른 분들도 같은 현상을 겪은 것 같은데요.

      align-items: center을 body 태그에 넣었을 때
      <!DOCTYPE html>을 쓰면 적용이 안 되고,
      영상처럼 <!DOCTYPE>으로 바꾸니 적용이 되네요.

      다른 영상에서는 계속 <!DOCTYPE html> 쓰셨는데, 이번엔 아니더라구요!
      어떤 차이가 있는지 궁금합니다!
    • 정광
      http://flexboxfroggy.com/#ko
      게임으로 플렉스를 실습해볼수 있는 좋은 사이트입니다!
      재밌고 간단하게 flex를 익힐 수 있어요
    • cocoapps
      처음 강의 들을때 부터 느낀건데 저의 뮤즈 서태지님과 목소리가 너무 유사해서 자꾸 듣고 싶고 궁금해 지는 강의 입니다. 어려움을 격고 있던 끝에 이런 오픈소스를 나누어 주셔서 너무 감사할 따름 입니다. 앞으로도 쭈욱 ~열심히 들을랍니다.~~거마워용^^
    • Soyoung Park
      딱 제가 찾던 기능이에요...!! 각 엘리먼트를 비율에 따라 영역을 확보하는 레이아웃을 안드로이드에서 경험해본 뒤로 웹에서는 왜 구현이 안될까 하던 차에 이 강의를 보게되었네요.
      좋은 강의 감사합니다 :)
    • cmj88j@gmail.com
      필요한 기능인데 좀 어렵네요.
    • jgatsby
      ....와 대단하네요. bootstrap 없이도 이런게 된다.
      이고잉님 말대로 불편함을 엄청 겪고 나니까
      이런 기능을 보고 감탄할 수 있네요.
    • 명지대학교 컴퓨터공학과
      충분히 아톰으로 가능합니다.
      대화보기
      • ckocko
        컨테이너에 디스플레이 플렉스와 콜럼을 주는 이유가 따로 있나요? 있게해보고 빼고 해보고 둘 다 했는데 화면에 보여주는건 똑같아서요..! 혹시 다른 의미가 있으신가 궁금합니다! 그리고 플렉스는 반응형?이라서 플로트를 이용하는 것ㅊ ㅓ럼 마진 오토값을 적용해서 화면 가운데에 배치하는게 의미가 없는건가요?
      • 유광수
        좋은 강의 잘 듣고, 많이 배웠습니다.

        궁금한 점이 있어 문의드립니다.

        세로정렬(align-items: center)이
        <!DOCTYPE html>을 쓰면 적용이 안 되고,
        <!DOCTYPE><html>을 써야 적용이 됩니다.

        혹시 어떤 차이가 있는지요?
      • Maisy Kim
        flex-basis값을 설정해주지 않으면 flex-shrink:0 은 의미가 없는건가요?
      • 윤재우
        검색을 해보았는데 아톰쓰시죠 ? 소문에 의하면.. 아톰에서 flex 옵션이 업뎃이 안되서 인식은 하는데 적용이 안된대요. 브라켓에선 된다니 브라켓으로 하시거나 아니면 그저 눈으로 익히셔야 할것같네영
        대화보기
        • 김상식
          https://opentutorials.org......455
          에디터를 Brackets로 바꾸셨어요.
          대화보기
          • 수업 잘듣고 있습니다!

            Atom 에서 패키지 사용 하시는것 같은데,

            어떤 패키지들 사용 하시는지 궁금 합니다.

            예를들어 수정하면 바로 보기, 코딩 텍스트 컬러, 그리고 네비게이션??(코드 상하 관계 있을때 접었다 폈다 하는 기능) 등과 같은 것들 말이죠, 아톰 패키지 같은데 어떤것으로 검색해서 설치 해야 할지 모르겠네요

            이고잉님 쓰시는 아톰 패키지좀 알려 주시면 감사하겠습니다!
          • 임지호
            flex : 레이아웃을 좀 더 쉽게 짜기 위해 고안됨. item과 그것을 담을 container가 필요.
            - 컨테이너에 속성에 display:flex;를 하는 것부터 시작
            - 여러 속성들
            flex-basis : 크기 지정, flex-grow : 아이템들이 컨테이너를 나눠갖는 비율 결정, flex-shrink : 화면이 작아질 때 줄어
            드는 비율 결정, flex-diretion : 컨테이너 방향 결정(row, column), flex-wrap : 아이템 크기가 컨테이너 크기보다
            크다면 줄바꿈, align-items : 수직 관련 정렬, justify-items : 수평 관련 정렬, align-content : 아이템을 그룹핑해서
            정렬, align-self : 특정 아이템만 크기 다르게, flex : flex-grow + shrink + basis, order : 아이템의 순서 바꿈.
            - holy grail layout : 이런 형태의 레이아웃을 flex를 통해 쉽게 만들 수 있음
            <header>
            <section> - <nav>,<main>,<aside> 수평 정렬
            <footer>
            수직 정렬
          • ㅂㅂㅂ
            와! 이런기능까지 알려주시고
            너무 감사합니다.
            지금 당장 홈페이지 레이아웃 짜서 제작해야됬었는데, 바로 사용가능하겠군요!
          • ㅂㅂㅂ
            와! 이런기능까지 알려주시고
            너무 감사합니다.
            지금 당장 홈페이지 레이아웃 짜서 제작해야됬었는데, 바로 사용가능하겠군요!
          • 연이
            이제 float에서 해방이다..ㅎㅎㅎ
            이게 말로만 듣던 신세계..
          • 허민호
            감사합니다
          • 감사합니다
          • 가운데
            바로 위 예제 처럼 박스안의 숫자들이 정확히 가운데에 위치하게 하기 위해선 어떻게 해야하나요?
            예를 들어
            <ul>
            <li><a href=""><img src="" alt="" /></a></li>
            <li><a href="">Teaser.</a></li>
            <li><a href="">Invitation.</a></li>
            <li><a href="">Memories.</a></li>
            </ul>
            이 코드일 때
            css로
            ul 에 flex를 주고 li에 flex-grow:1을 주면 화면을 균등하게 바로 가져가는 것 까지는 되는데
            ul에 높이가 있을 경우 텍스트들이 상하좌우 정가운데에 위치하게 하기위해선 어떤 코드를 써야할지 궁금합니다.
          • 뭔가 쌩뚱맞지만 이고잉님 진짜 대박입니다. 여지껏 클라이언트단 자바스크립트, 자바, 노드js, 깃허브 등등.. 이고잉님 덕분에 어마어마한 양을 공짜로 배웠네요.. 열심히 공부해서 어떻게든 보답해드리고 싶다는 생각이...ㅠ 제 인생을 바꾼 생활코딩! 정말 감사합니다. 앞으로도 애용할게요. 사랑합니다!!
          • 광대승천
            잘봤습니다.
          • 광대승천
            새로운 파일에 하니까 되네요... ㅠㅠ
            대화보기
            • 광대승천
              저도 지금 하고 있는데 body태그에 flex 선언해주었는데
              효과 적용이 안되네요 ㅠ
              말씀하신대로 doctype 해봐도 안되고요 ㅠ
              대화보기
              • W.Machine
                너무 좋아요~!!!
              • 감사합니다!
              • 바스티앙-비베스
                html태그 전에 선언하는 <!doctype>과 <!DOCTYPE html>이 차이가 있나요??

                전 원래 <!DOCTYPE html>로 선언하는데,,,
                5번째영상에서 body태그에 display:flex; / align-items:center;가 안먹더라고요...(반영이 안됨..)

                그래서 이고잉님처럼 <!doctype>으로 바꾸고 하니 body태그에 속성값이 적용되면서 잘 되더라고요... 헐;;;;

                <!doctype> 이랑 <!DOCTYPE html>의 차이점을 아시는분, 답변좀주세요 !!!
              • 이보라
                반응형 만들기 너무 쉬워지겠네요. 우왕
                일단 지금은 혼자 가지고 놀기만 해도 무지 재밌을 거 같아요
              • =ㅅ=)bbbbbbbb
                holyGrailLayout 이라고 불릴만 하네요..

                수업 감사합니다.
              • 이해가 쏙쏙 되네요!
              • 감사합니다! 즐겁게 들었습니다.
              • kkndw2659
                이내용, 대박이요...국내에서 웹은 익스점유율이 높아서 사용하기 애매하지만,
                모바일 을 만든다고 생각하면... 이거정말 대박이네요... 간단한 제이쿼리 기초 지식만으로

                엄청난 성능의 스크립트를 만들수 있겟는데요....

                특히 holy grail layout 에서, 진짜 눈돌아갔네요 이쪽 업무 처음 배우면서 공부 안하는 사수한테 물어봤다가
                짜증듣고 여기저기 저 layout 구현하는거 배우느라 간쓸개 다 주면서 배웠는데

                참.... 씁쓸하네요 이렇게 쉽게 구현이 되버린다니...
              • 김진훈
                감사합니다 잘 배웠습니다~
              • Park Hansu
                flex라는 규격이 필요해진 데에는 반응형 웹의 등장이 차지하는 비중이 크지않나 생각합니다ㅎ
              • egoing
                저도 이번에 알았어요 ㅎㅎ
                대화보기
                • LiveScript
                  드디어 생활코딩에 flex가 올라왔군요.!!
                • 감사합니다.
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기