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. jeisyoon
    2021.06.22 Flex - OK
  2. 헉 저도 align-items: center 가 안돼서...한참 끙끙대다가
    <!doctype> html 삭제했는데 되네요 ㅠㅠ html로 해야하는거 아닌가요...? 스타일시트는 html로 하면 안되나..
  3. flex 굿!!!!
  4. justify-content:center; 사용해도 화면 좁아질 때 위에서부터 시작하는 ui가 되지않습니다,,,
    혹시 이부분에 대해 아시는분 있으실까요,,,
  5. datsciseol
    20210116
  6. 주니어개발자
    HTML5 기본 DTD 방식이 <!doctype html> 인데,
    왜 이렇게 선언하면 정렬되지 않는지 정말 알 수 없네요....
    대화보기
    • 분홍신
      align-items: center 안되는 문제를 강사님 파일과 비교해보니....
      문서 상단에 <!doctype> 으로 되있는지 확인 해보세요!
      저는 <!doctype html>로 되있던걸 <!doctype>로 바꾸었더니 모든게 해결되었네요.
      대화보기
      • 분홍신
        align-items: center 안되는 문제를 강사님 파일과 비교해보니....
        문서 상단에 <!doctype> 으로 되있는지 확인 해보세요!
        저는 <!doctype html>로 되있던걸 <!doctype>로 바꾸었더니 모든게 해결되었네요.
        대화보기
        • 안명철
          고민하던 문제의 해결 시발점을 보았습니다.
          감사합니다.
        • 따뜻한츄르
          힘든데 재밌었어요
          2021 01 01
        • Amy CHO
          코딩한거 한참을 들여다봤는데.. 여기에 답이 있었네요!!! 감사합니다~
          저처럼 헤매셨던 분들이 이 댓글을 일찍 발견하시길~
          대화보기
          • 201215 휴우 어렵네요... align-items: center 가 안먹긴 하지만 일단 패스하고 달리겠습니당
          • 만듀
            20201112
          • jihodude
            하..... 지금 박스 모델 배우고 혼자 10시간동안 끙끙 거리면서 웹패이지를 만들었는데 flex만 알았으면 1시간 이면 했겟다....
          • flex가 중요, 감사합니다
          • Hesher1972
            감사합니다 해결됬어요 ^^
            대화보기
            • 콜라
              20200928완료
            • Lee Seulgi
              align-items: center를 body에 적용했는데요. 강사님처럼 브라우저 크기에 맞춰 수직정렬이 되지 않습니다.

              body에 border 값을 주니까 콘텐츠들 있는 만큼만 높이가 있던데 어떻게 해야 똑같은 환경에서 실습이 가능할까요? ㅠㅠ

              혹시나 해서 html 태그에 height: 100%, body 태그에 height: 100% 를 주었는데요. 그럴게 할경우에는 브라우저 크기가 작아졌을 경우 hearder 태그에 있는 콘텐츠가 잘려서 나옵니다 ㅠ_ㅠ ....
            • Lee Seulgi
              질문 있습니다. 혹시 footer에 height 값을 주고 background-color 을 설정했는데요.
              텍스트를 상하중앙정렬 하려면 어떻게해야할까요?
              vertical-align 속성은 되지 않던데 ㅠㅠ.... 어떤 식으로 적용해야 가능할까요?
            • switpotato
              20200906: 완료! Flex 너무 유용한 기능이었네요! 좋은 강의 감사합니다!
            • handoll
              처음 듣는 flex 지만 거의 모두 이해했습니다.
              다시 한번 감사드립니다.
            • 김성곤
              모라토리움님 등 align-items: center 반영 안되시는 분들은, 아래 내용을 입력해보세요.
              html{
              height:100%;
              }
              body{
              height:100%;
              display: flex;
              align-items: center;
              }
            • 모라토리움
              body {
              display:flex;
              align-items: center;
              }

              요기가 안 먹네요 다 맞게 했는데 이상하게 브라우저 바꿔봐도 center로 이동을 안합니다ㅠ
            • jaehyunlee
              완료
            • 한강
              Flex 어렵네요. 한번 더 보겠습니다.
              오늘도 감사합니다. ^^!
              200609
            • heumheum2
              flex 공부해야지 해야지 하고 있었는데 덕분에 기본 개념을 알아가네요 ㅎㅎ
              감사합니다!
            • 아기별
              제 컴퓨터만 크롬창이 그런 것이 아니었군요. 조금 지난 글임에도 친절히 알려주셔서 감사합니다 ^ㅇ^!!!!
              대화보기
              • 아기별어멈
                크롬에서 가로 최소크기가 있는 것 같습니다.
                영상 보면서 따라하실 경우 150px 보다 크게 잡아서 해보면 확인 가능해요
                저는 350px로 잡고 했어요
                대화보기
                • 범고래
                  flex-basis:150px; 값은 고정인가요? 아니면 가장 이상적인 값인가요?
                • 코딩
                  완료
                • IE11에서는 버그가 있기 때문에 flex로 만들고 난 후 IE11에서 잘 작동되는지 꼭 확인을 함께 해주셔야 합니다.
                • leekyong
                  grow & shrink 까지 봤어요~ 너무 재밌네요 flex 속성이^^
                • 아기별
                  Q. 궁금한게 있는데 왜 다섯번째 영상의 코드를 쓸 때
                  style에서 head와 body에 height:100%를 넣어야 가운데 정렬이 되는건가요?
                  숨겨진 원리가 있나요? 'ㅁ' 팁 알려주신 분들 모두 감사합니다.
                • 아기별
                  chrome이 아니라 explorer로 하니까 잘 되네요.
                  chrome창을 살펴보니까 다른 창도 특정 길이 이하로는 가로 너비가 줄어들지 않던데
                  제 계정의 설정은 그렇게 되어있나봐요.
                  대화보기
                  • 아기별
                    선택자 게임으로도 공부 잘했었는데 좋은 사이트 사이트 공유해주셔서 감사해요!! ^ㅁ^ 乃
                    대화보기
                    • 아기별
                      ㄱㅜ.. 저처럼 세 번째 영상에서 막히신 분 없나요?
                      flex-grow값을 줘도 창크기 조절 시 flex-basis: 150px인 2번째 칸이 안 줄어드네요..
                      background가 200px이 되면 더 이상 창이 가로 방향으로 줄어들지 않아서요.
                      대체 뭐가 오류인지를 모르겠네요.
                    • 코딩새싹
                      이거 아마 안먹힌게 아니라 먹혔는데 공백이 있어서 오른쪽 AD 옆으로 공백이 남은 걸거에요. 더 확실히 확인하고 싶으시면 .contaoner 여기다가 백그라운드 컬러 한 번 먹여보시면 AD 옆쪽으로 .contaoner에 먹인 배경색이 보이실 거 같아요.
                      대화보기
                      • 초코아빠
                        <!DOCTYPE html>
                        <html>
                        <head>
                        <meta charset="utf-8">
                        <style>
                        body{
                        display:flex;
                        align-items: center;
                        }
                        .container{display:flex;
                        flex-direction:column;
                        width:800px;
                        border:1px solid gray;}
                        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>
                        생활코딩은 일반인을 위한 코딩 수업입니다.
                        </main>
                        <aside>
                        AD
                        </aside>
                        </section>
                        <footer>
                        <a href="http://opentitoruals.org/course/1">홈페이지</a>
                        </footer>
                        </div>
                        </body>
                        </html>


                        이렇게 작성을 했는데.. 페이지 가운에 정렬이 아니라 표에서 중간"생활코딩은 일반인을 위한 코딩수업 입니다."
                        이 부분이 가운데 정렬로 되네요.. 혹시 틀린 부분이 있을까요,,,? ㅠㅠ
                      • 무지개반사
                        완료
                      • Blanc
                        2020.01.05
                      • jinxiong
                        clear
                      • 휴 어렵네용 ㅠㅠ
                      • adsf
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;

                        justifiy-content를 사용하시면 됩니다.
                        대화보기
                        • 태태
                          많이 알게됐지만..아직도 어렵네요 ㅎㅎ 감사합니다
                        • 류석현
                          수강완료
                        • Coder
                          아리까리하던건데, 많이 알게돼서 좋네요 ㅎㅎ 근데 아직도 아리까리해서 복습 여러번 해야겠어요ㅜ
                        • FIRE
                          20190730 완료
                        • 다나가
                          190729 - 수강완료!!
                        • didQk
                          order 이거 딱 원하던 기능이었는데! 좋네요! 감사합니다.
                        • 박지성
                          이번 수업은 상당히 볼 영상이 많아 고전했다고 생각하기 때문에
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기