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. 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 공부해야지 해야지 하고 있었는데 덕분에 기본 개념을 알아가네요 ㅎㅎ
      감사합니다!
    • 이상적인 수치같습니다.
      200px로 변경해서 해보셔도 되요.
      제가 수치가 증가할수록 좀 더 확실히 .content>nav와 .content>aside의 width값이 고정되어있다는게 잘 보입니다.
      대화보기
      • 아기별
        제 컴퓨터만 크롬창이 그런 것이 아니었군요. 조금 지난 글임에도 친절히 알려주셔서 감사합니다 ^ㅇ^!!!!
        대화보기
        • 아기별어멈
          크롬에서 가로 최소크기가 있는 것 같습니다.
          영상 보면서 따라하실 경우 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>


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

                  justifiy-content를 사용하시면 됩니다.
                  대화보기
                  • 태태
                    많이 알게됐지만..아직도 어렵네요 ㅎㅎ 감사합니다
                  • 류석현
                    수강완료
                  • Coder
                    아리까리하던건데, 많이 알게돼서 좋네요 ㅎㅎ 근데 아직도 아리까리해서 복습 여러번 해야겠어요ㅜ
                  • FIRE
                    20190730 완료
                  • 다나가
                    190729 - 수강완료!!
                  • didQk
                    order 이거 딱 원하던 기능이었는데! 좋네요! 감사합니다.
                  • 박지성
                    이번 수업은 상당히 볼 영상이 많아 고전했다고 생각하기 때문에
                  • flex
                    컨테이너 안에
                    아이템을 3개로 설정 후
                    1,3를 flex-basis 주고
                    2를 내용없이 flex-grow 1이상

                    그럼 2가 1,3의 고정된 basis 제외하고 다 독식
                    display flex 로만 하는 건 모르겠습니당
                    대화보기
                    • flex??
                      혹시 display flex로 float와 같이 가운데에 여백을 두고 왼쪽 , 오른쪽 정렬이 가능한가요?
                      ---------------------------
                      ㅁ여백여백여백여백ㅁ
                      ---------------------------
                      이런식으로???
                    • 김경모
                      flex-shrink 속성에서 값을 0으로 줄 때와 1로 줄 때와 차이가 전혀 없습니다 구글 크롬으로 실제로 테스트해보고 검사탭으로 코드가 적용되었는지도 확인했는데 어째서인가요?
                    • lygon
                      2019-03-03 완료
                    • 배은구
                      저도 안되서 고민하다가 html과 body에 height를 추가하니 되네요. 감사합니다.
                      대화보기
                      • 한승민
                        드디어!!
                        190226
                      • 환장
                        flex4 강좌 홀리그레일에서요
                        <main> 에서 생활코딩입니다 이런식으로 아주 짧은 문장하면
                        shrink 가 안먹히네요. ad 가 옆으로 길어져요
                        로렘입섬으로 의미없는 문장을 가득 채우면 적용되요.
                        원래 이런가요? 윈도우10 쓰고 윈도우랑 크롬 두개다 그래요. 둘다 지금시점에서 제일 최신버전입니다.
                      • 숨이
                        완료햇습니당
                      • Flex 신세계 에요!!

                        Holy Grail 나눔 감사요!
                      • 오승룡
                        세상 감사합니다..ㅠㅠㅠㅠ 여기에서 막혀서 왜그런가하고 엄청 고민중이었거든요 ㅠㅠ 오늘 집에 갈 수 있을 듯 합니다 ㅠㅠ 감사합니다ㅠㅠ
                        대화보기
                        • 성명준
                          <!DOCTYPE html>
                          <html>
                          <head>
                          <meta charset="utf-8">
                          <style type="text/css">
                          html{
                          height:100%;
                          }
                          body{
                          height:100%;
                          display:flex;
                          align-items:center;
                          }
                          .container{
                          display: flex;
                          flex-direction:column;
                          }
                          header{
                          border-bottom: 1px solid gray;
                          padding-left: 20px
                          }
                          footer{
                          border-top: 1px solid gray;
                          padding-left: 20px;
                          text-align: center
                          }
                          .content{
                          display: flex;
                          }
                          .content nav{
                          border-right: 1px solid gray;
                          }
                          .content aside{
                          border-left: 1px solid gray;
                          }
                          .content nav,.content aside{
                          flex-basis: 150px;
                          flex-shrink: 0;
                          }
                          main{
                          padding: 10px;
                          }
                          </style>
                          <title></title>
                          </head>
                          <body>
                          <div class="container">

                          <header>
                          <h1>생활코딩</h1>
                          </header>

                          <section class="content">
                          <nav>
                          <ul>
                          <li>html</li>
                          <li>javascript</li>
                          <li>css</li>
                          </ul>
                          </nav>
                          <main>
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                          </main>
                          <aside>
                          AD
                          </aside>
                          </section>

                          <footer>
                          <a href="http://opentutorials.org/course/1">홈페이지</a>
                          </footer>
                          </div>
                          </body>
                          </html>

                          위말씀처럼하니깐 가운데로 가네요 감사합니다.
                          대화보기
                          • 리젤린
                            굿!
                          • 김민영
                            완료!
                          • kimYoon
                            <!doctype html5>에서 align-items 적용하는법

                            body {
                            height:100vh;
                            }

                            html5 표준코드에서는 body 태그의 height가 화면전체를 차지하는 것이 아닌 자신이 감싸고 있는 컨텐츠 내용만을 차지하고 있는 듯 합니다.
                            그래서 뷰포트(보고있는화면) 단위를 100vh로 height를 화면 전체를 차지하게 하면 되는 듯 합니다.
                          버전 관리
                          egoing
                          현재 버전
                          선택 버전
                          graphittie 자세히 보기