플렉스(flex)

차명미·2020년 4월 7일

7주차스터디

목록 보기

1/1

플렉스(flex)박스 레이아웃

플렉서블 박스 레이아웃과 새로운 용어

플렉서블 박스 레이아웃(flexible box layout)이란 그리드 레이아웃을 기본으로 해 플렉스 박스를 원하는 위치에 배치하는 것이다. 플렉스 박스를 이용하면 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형이 가능하다.

플렉스 박스 레이아웃 기본 속성

display 속성 - 플렉스 컨테이너 지정하기

*기본형*
display : flex | inline-fiex

배치하려는 웹 요소들이 있다면 그 요소들을 감싸는 부모 요소를 플렉스 컨테이너로 만들어야한다. 이때 특정 요소가 플레스 컨테이너로 동작하려면 display 속성을 이용해 플렉스 박스 형태를 지정해야 한다.

속성 값	설 명
flex	플렉스 박스를 레벨 요소로 정의한다.
inline-fiex	플렉스 박스를 인라인 레벨 요소로 정의한다.

<head>
  <style>
      #container {
          display:flex;
      }
  </style>
</head>
<body>
    <div id="container">
    	<div></div>
       	<div></div>
    </div>
</body>

display 속성과 브라우저 접두사
-브라우저마다 플렉스 박스를 지원하는 방법이 달라 브라우저 접두사를 붙여야 한다. 특히 플렉스 컨테이너를 지정하는 display 속성의 경우, 접두사가 상당히 복잡하다. 브라우저와 버전에 따라 다음과 같이 브라우저 접두사를 붙여 표시한다.

.display속성 {
	display : -webkit-box; /*iOS6 이하, 사파리 3.1*/
        display : -moz-box; /*파이아폭스 19이하*/
	display : -ms-flexbox; /*IE 10*/
        display : -webkit-flex; /*웹킷 구 버전*/
        display : flex; /*표준 스펙*/
}

flex-direction 속성 - 플렉스 방향 지정하기

*기본형*
flex-direction : row | row-reverse | column | culumn-reverse

플렉스 컨테이너를 지정했으면 플렉스 항목을 배치할 방향을 알려주어야 한다. flex-direction 속성으로 항목의 가로(row)로 할지, 세로(column)로 할지 지정해야한다. 따로 지정하지 않으면 기본 값인 row로 인식된다.

속성 값	설 명
row	주축을 가로로 교차축을 세로로 지정한다. 플렉스 항목은 주축 시작점에서 끝점으로(왼쪽->오른쪽) 배치된다.
row-reverse	주축을 가로로 교차축을 세로로 지정한다. 플렉스 항목은 주축 끝점에서 시작점으로(오른쪽->왼쪽) 배치된다.
culumn	주축을 세로로 교차축을 가로로 지정한다. 플렉스 항목은 주축 끝점에서 시작점으로(위쪽->아래쪽) 배치된다.
culumn-reverse	주축을 세로로 교차축을 가로로 지정한다. 플렉스 항목은 주축 끝점에서 시작점으로(아래쪽->위쪽) 배치된다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-direction</title>
    <style>
        #wrap1,#wrap2 {
            width: 600px;
            border: 1px solid red;
            box-sizing: border-box;
            
        }
        #wrap1 {
            margin-bottom: 200px;
        }
        .container1 {
            display: flex;
            flex-direction:row; /*기본값 왼쪽->오른쪽*/
        }
        .container1 div {
            width: 200px;
            border: 1px solid black;
            background-color: #ccc;
        }
        .container2 {
            display: flex;
            flex-direction:column; /*위->아래*/
        }
        .container2 div {
            width: 200px;
            border: 1px solid black;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id="wrap1">
        <div class="container1">
            <div class="box1">
                <h2>1</h2>
            </div>
            <div class="box2">
                <h2>2</h2>
            </div>
            <div class="box3">
                <h2>3</h2>
            </div>       
        </div>
    </div>
    <div id="wrap2">    
        <div class="container2">
            <div class="box4">
                <h2>1</h2>
            </div>
            <div class="box5">
                <h2>2</h2>
            </div>
            <div class="box6">
                <h2>3</h2>
            </div>       
        </div>
    </div>    
</body>

flex-wrap 속성 - 플렉스 항목을 한 줄 or 여러 줄로 배치하기

*기본형*
flex-wrap : no-wrap | wrap | wrap-reverse

flex-wrap속성을 사용하면 플렉스 항목을 여러 줄에 걸쳐 표시가 가능하다.

속성 값	설 명
no-wrap	플렉스 항목들을 한 줄에 표시한다. (기본 값)
wrap	플렉스 항목을 여러 줄에 표시한다.
wrap-reverse	플렉스 항목을 여러 줄에 표시하되 가존 방향과 반대방향으로 배치한다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-wrap속성</title>
    <style>
        #wrap1,#wrap2,#wrap3 {
            width: 500px;
            margin: 0 auto;
            border: 1px solid red;
        }
        #wrap1, #wrap2 {
            margin-bottom: 50px;
        }
        .container1 {
            display: flex;
            /*기본 값*/
            flex-wrap: no-wrap;
        }
        .container2 {
            display: flex;
            /*항목을 여러줄에 표시*/
            flex-wrap: wrap;
        }
        .container3 {
            display: flex;
            /*항목을 여러줄에 표시하되 기존 방향과 반대로 배치*/
            flex-wrap: wrap-reverse;
        }
        .container1 div, .container2 div, .container3 div {
            width: 200px;
            border: 1px solid black;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id="wrap1">
        <div class="container1">
            <div class="box1">
                <h2>1</h2>
            </div>
            <div class="box2">
                <h2>2</h2>
            </div>
            <div class="box3">
                <h2>3</h2>
            </div>       
        </div>
    </div>
    <div id="wrap2">    
        <div class="container2">
            <div class="box4">
                <h2>1</h2>
            </div>
            <div class="box5">
                <h2>2</h2>
            </div>
            <div class="box6">
                <h2>3</h2>
            </div>       
        </div>
    </div>
    <div id="wrap3">    
        <div class="container3">
            <div class="box7">
                <h2>1</h2>
            </div>
            <div class="box8">
                <h2>2</h2>
            </div>
            <div class="box9">
                <h2>3</h2>
            </div>       
        </div>
    </div>
</body>

flex-flow 속성 - 플렉스 방향과 여러 줄의 배치를 한꺼번에 지정하기

*기본형*
flex-flow : <플렉스 방향> <플렉스 줄 배치>

flex-flow 속성으로 플렉스 배치 방향과 어려 줄의 배치 방법을 공백 문자로 구분해 표시한다.
기본 값은 flex-flow :row no-wrap 이다.

ex flex-flow : row; /* 왼쪽->오른쪽으로, 한 줄에 표시 */
   flex-flow : column wrap; /* 위->아래로, 여러 줄에 표시 */

order 속성 - 플렉스 항목의 배치 순서 바꾸기

 *기본형*
 order : 0 | 숫자

order값이 '0'이면 소스에 입력한 순서대로 배치되고, order값을 숫자로 하면 그 순서에 따라 배치된다.

★order 속성은 플렉스 컨테이너가 아닌 플렉스 항목에서 지정해야 된다.★

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>order속성</title>
    <style>
        #container {
            display: flex;
            flex-direction: column;
            width: 200px;
            margin: 0 auto;
            /* border: 1px solid red; */
        }
        #container div {
            width: 200px;
            background-color: #eee;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        .box1 {order: 5;}
        .box2 {order: 3;}
        .box3 {order: 4;}
        .box4 {order: 1;}
        .box5 {order: 2;}
    </style>
</head>
<body>
    <div id="container">
        <div class="box1">
            <h3>box1</h3>
        </div>
        <div class="box2">
            <h3>box2</h3>
        </div>
        <div class="box3">
            <h3>box3</h3>
        </div>
        <div class="box4">
            <h3>box4</h3>
        </div>
        <div class="box5">
            <h3>box5</h3>
        </div>
    </div>
</body>

flex 속성 - 플렉스 항목 크기 조절하기

*기본형*
flex : [<flex-grow> <flex-shrink> <flex-basis>] | auto | initial

속성 값	설 명
flex -grow flex -shrink flex -basis	플렉스 항목의 너비를 얼마나 '늘일지' 숫자로 지정한다. 플렉스 항목의 너비를 얼마나 '줄일지' 숫자로 지정한다. 플렉스 항목의 '기본 크기'를 지정한다. 기본값은 auto이다.
initial	항목의 width/height 값에 의해 크기가 결정 되는데 플렉스 컨테이너의 공간이 부족할 경우, 최소 크기까지 줄인다.
auto	항목의 width/height 값에 의해 크기가 결정되지만 플렉스 컨테이너의 공간에 따라 늘이거나 줄인다.

flex-grow, flex-shrink, flex-basis 속성은 별개의 속성이지만 따로 쓰지 말고 flex속성으로 묶어서 사용하길 권장한다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex속성 값</title>
    <style>
        section {
            display: flex;
            width: 600px;
            height: 300px;
            margin: 0 auto;
            border: 3px solid red;
            /* box-sizing: border-box; */
        }
        section article {
            width: 200px;
            height: 100px;
            margin-top: 100px;
            background-color: #eee;
            border: 2px solid #000;
        }
        section article:nth-child(1) {
            /* 늘이거나 줄이지 않음 */
            flex: 1 1 0;
        }
        section article:nth-child(2) {
            /* 2배 늘이거나 2배 줄임 */
            flex: 2 2 0;
        }
    </style>
</head>
<body>
    <section>
        <article><h1>1</h1></article>
        <article><h1>2</h1></article>
        <article><p><b>3</b>번째박스는 flex속성을 지정하지 않았기때문에 기본값이 initial로 인식됨</p></article>
    </section>
</body>

플렉스 항목 배치를 위한 속성들

justify-content 속성 - 주축 기준의 배치 방법 지정하기

*기본형*
justify-content : flex-start | flex-end | center | space-between |space-around

플렉스 항목을 주축 방향으로 배치할 때의 배치 기준을 지정할 수 있다

속성 값	설 명
flex-start	주축의 '시작점 기준'으로 배치한다.
flex-end	주축의 '끝점을 기준'으로 배치한다.
center	주축의 '중앙을 기준'으로 배치한다.
space-between	첫 번째 플렉스 항목과 마지막 플렉스 항목은 시작점과 끝점에 배치한 후 중앙 항목들은 같은 간격으로 배치한다.
space-around	모든 플렉스 항목들을 '같은 간격'으로 배치한다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>justify-content속성</title>
    <style>
        section {
            display: flex;
            width: 1000px;
            margin-bottom: 50px;
            border: 2px solid blue;
        }
        section article {
            width: 200px;
            background-color: #eee;
            border: 1px solid black;
        }
        section.se1 {
            /* 주축의 시작점 기준으로 배치 */
            justify-content: flex-start;
        }
        section.se2 {
            /* 주축의 끝점 기준으로 배치 */
            justify-content: flex-end;
        }
        section.se3 {
            /* 주축의 중앙을 기준으로 배치 */
            justify-content: center;
        }
        section.se4 {
            /* 
             첫 번째 플렉스 항목과 마지막 플렉스 항목은
             시작점과 끝점에 배치 한 후 중앙 항목들은
             같은 간격으로 배치 
            */
            justify-content: space-between;
        }
        section.se5 {
            /* 모든 플렉스 항목들을 같은간격으로 배치 */
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <section class="se1">
        <article><h1>1</h1></article>
        <article><h1>2</h1></article>
        <article><h1>3</h1></article>
    </section>
    <section class="se2">
        <article><h1>1</h1></article>
        <article><h1>2</h1></article>
        <article><h1>3</h1></article>
    </section>
    <section class="se3">
        <article><h1>1</h1></article>
        <article><h1>2</h1></article>
        <article><h1>3</h1></article>
    </section>
    <section class="se4">
        <article><h1>1</h1></article>
        <article><h1>2</h1></article>
        <article><h1>3</h1></article>
    </section>
    <section class="se5">
        <article><h1>1</h1></article>
        <article><h1>2</h1></article>
        <article><h1>3</h1></article>
    </section>
</body>

align-items 속성 align-self 속성 - 교차축 기준의 배치 방법 지정하기

*기본형*
align-items : stretch | flex-start | flex-end | center | baseline

속성 값	설 명
stretch	플렉스 항목을 확장해 교차축을 꽉 채운다. (기본 값)
flex-start	교차축의 '시작점 기준'으로 배치한다.
flex-end	교차축의 '끝점을 기준'으로 배치한다.
center	교차축의 '중앙을 기준'으로 배치한다.
baseline	시작점과 글자 기준선이 가장 '먼' 플렉스 항목을 시작점에 배치한다. 그리고 그 글자의 기준선과 다른 항목의 기준선을 맞춰 배치한다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-items속성</title>
    <style>
        section {
            display: flex;
            width: 1000px;
            height: 100px;
            margin-bottom: 50px;
            border: 2px solid blue;
        }
        section article {
            width: 200px;
            background-color: #eee;
            border: 1px solid black;
        }
        section:nth-child(1) {
            /* 플렉스 항목을 확장해 교차축을 꽉 채운다 (기본값) */
            align-items: stretch;
        }
        section:nth-of-type(2) {
            /* 교차축의 시작점을 기준으로 배치 */
            align-items: flex-start;
        }
        section:nth-of-type(3) {
            /* 교차축의 끝점 기준으로 배치 */
            align-items: flex-end;
        }
        section:nth-of-type(4) {
            /* 교차축의 중앙을 기준으로 배치 */
            align-items: center;
        }
        section:nth-of-type(5) {
            /* 
              flex item의 글꼴 사이즈(font-size)와 줄 간격(line-height)이 모두 동일한 경우 
              flex-start 값과 동일한 결과를 보여주지만, 글꼴 사이즈(font-size) 또는 
              줄 간격(line-height)을 flex item 마다 다르게 설정하면 포함하고 있는 문자열의 
              baseline 기준으로 정렬한다. 
            */
            align-items: baseline;
        }      
    </style>
</head>
<body>
    <section>
        <article><h1>1</h1></article>
        <article><h1>2</h1></article>
        <article><h1>3</h1></article>
    </section>
    <section>
        <article><h1>1</h1></article>
        <article><h1>2</h1></article>
        <article><h1>3</h1></article>
    </section>
    <section>
        <article><h1>1</h1></article>
        <article><h1>2</h1></article>
        <article><h1>3</h1></article>
    </section>
    <section>
        <article><h1>1</h1></article>
        <article><h1>2</h1></article>
        <article><h1>3</h1></article>
    </section>
    <section>
        <article><h1>1</h1></article>
        <article><h5>2</h5></article>
        <article><h1>3</h1></article>
    </section>
</body>

align-self 속성을 이용하면 '특정' 플렉스 항목만 배치 방법을 바꿀 수 있다.

*기본형*
align-self : auto | stretch | flex-start | flex-start | flex-end | baseline |

align-self의 속성 값은 플렉스 항목의 부모 속성 값을 '상속'받는 auto를 제외하면 align-items에서의 속성 값과 같다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-self속성</title>
    <style>
        .container {
            display: flex;
            /*******************/
            /* align-items속성은 부모 요소에 적용해야됨 
                교차축의 중앙을 기준으로 플렉스 항목 배치
            */
            align-items: center;
            width: 1000px;
            height: 200px;
            margin-bottom: 50px;
            border: 2px solid blue;
        }
        .container div {
            width: 200px;
            background-color: #eee;
            border: 1px solid black;
        }
        
        .container div.box1 {
            /* 첫번째 박스만 교차축의 시작점에 배치*/
            align-self: flex-start;
        }
        .container div.box3 {
             /* 세번째 박스만 교차축의 끝점에 배치*/
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"><h1>1</h1></div>
        <div class="box2"><h1>2</h1></div>
        <div class="box3"><h1>3</h1></div>
    </div>
</body>

align-content 속성 - 여러 줄일 때의 배치 방법 지정하기

*기본형*
align-content : flex-start | flex-end | center | space-between |space-around

플렉스 항목이 여러 줄에 걸쳐 표시될 때 align-content 속성을 사용하면 교차축 방향의 배치 방법을 지정할 수 있다.

속성 값	설 명
flex-start	주축의 '시작점 기준'으로 배치한다.
flex-end	주축의 '끝점을 기준'으로 배치한다.
center	주축의 '중앙을 기준'으로 배치한다.
space-between	첫 번째 플렉스 항목과 마지막 플렉스 항목은 시작점과 끝점에 배치한 후 중앙 항목들은 같은 간격으로 배치한다.
space-around	모든 플렉스 항목들을 '같은 간격'으로 배치한다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-content속성</title>
    <style>
        section {
            display: flex;
            flex-wrap: wrap;
            width: 500px;
            height: 150px;
            /* margin: 0 auto; */
            margin-bottom: 20px;
            border: 2px solid blue;
            /* box-sizing: border-box; */
        }
        section article {
            width: 200px;
            height: 50px;
            /* margin-top: 100px; */
            background-color: #eee;
            border: 1px solid #000;
        }
        section:nth-of-type(1) {
            /* 교차축의 시작점을 기준으로 배치 */
            align-content: flex-start;
        }
        section:nth-of-type(2) {
            /* 교차축의 끝점 기준으로 배치 */
            align-content: flex-end;
        }
        section:nth-of-type(3) {
            /* 교차축의 중앙을 기준으로 배치 */
            align-content: center;
        }
        section:nth-of-type(4) {
            /* 
             첫 번째 플렉스 항목과 마지막 플렉스 항목은
             시작점과 끝점에 배치 한 후 중앙 항목들은
             같은 간격으로 배치 
            */
            align-content: space-between;
        }
        section:nth-of-type(5) {
            /* 모든 플렉스 항목들을 같은간격으로 배치 */
            align-content: space-around;
        }
    </style>
</head>
<body>
    <section>
        <article><h1>1</h1></article>
        <article><h1>2</h1></article>
        <article><h1>3</h1></article>
    </section>
    <section>
        <article><h1>1</h1></article>
        <article><h1>2</h1></article>
        <article><h1>3</h1></article>
    </section>
    <section>
        <article><h1>1</h1></article>
        <article><h1>2</h1></article>
        <article><h1>3</h1></article>
    </section>
    <section>
        <article><h1>1</h1></article>
        <article><h1>2</h1></article>
        <article><h1>3</h1></article>
    </section>
    <section>
        <article><h1>1</h1></article>
        <article><h1>2</h1></article>
        <article><h1>3</h1></article>
    </section>
</body>