CSS day15

flex-wrap

justify-content

align-items

align-self & order

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

대부분의 웹 사이트는 수직으로 구성되어있어 수직으로는 쉽게 구성할 수 있으나, 수평 구성은 구현 하기 쉽지 않다. 과거에는 수평 구성을 table, float, inline-block 으로 구성하였다. 플렉스 박스 레이아웃은 좀 더 쉬운 수평 구성을 구현 하기 위해 비교적 최근에 등장한 개념이다.

display

플렉스 박스 레이아웃을 만들기 위해서는 웹 컨텐츠를 플렉스 컨테이너로 묶어주는 작업이 필요하다. 즉, 배치할 웹 요소가 있다면 그 요소를 감싸는 부모 요소를 만들고, 그 부모 요소를 플렉스 컨테이너로 만들어 감싸주는 것이다. 이때 display 속성을 사용하면 된다.

종류	설명
flex	컨테이너 안의 플렉스 항목을 블록 요소로 배치
inline-flex	컨테이너 안의 플렉스 항목을 인라인 요소로 배치

flex-wrap

flex-wrap 속성은 플렉스 컨테이너 너비보다 많은 플렉스 항목이 있어 여유가 없을 경우 플렉스 요소의 위치를 다음줄로 넘길지 여부를 설정한다.

종류	설명
nowrap	기본 설정 값으로 플렉스 요소가 다음줄로 넘어가지 않고 요소의 너비를 줄여 한 줄에 배치
wrap	플렉스 요소가 여유공간이 없다면 다음줄로 넘김
wrap-reverse	플렉스 요소가 여유 공간이 없다면 다음줄로 넘김. 단, 아래쪽이 아닌 윗줄로 넘김

<!--생략-->
...
<div id="container1" class="container">
    <div id="box1"><h1>1</h1></div>
    <div id="box2"><h1>2</h1></div>
    <div id="box3"><h1>3</h1></div>
</div>
<div id="container2" class="container">
    <div id="box1"><h1>1</h1></div>
    <div id="box2"><h1>2</h1></div>
    <div id="box3"><h1>3</h1></div>
</div>
<div id="container3" class="container">
    <div id="box1"><h1>1</h1></div>
    <div id="box2"><h1>2</h1></div>
    <div id="box3"><h1>3</h1></div>
</div>
...
<!--생략-->

#container1{ flex-wrap: nowrap; }

#container2{ flex-wrap: wrap; }

#container3{ flex-wrap: wrap-reverse; }

justify-content

플렉스 요소의 수평 방향 정렬 방식을 설정한다.

종류	설명
flex-start	기본 설정값으로 앞쪽 부터 배치
flex-end	뒤쪽 부터 배치
center	가운데로 배치
space-between	요소들 사이에 여유 공간을 두고 배치
space-around	앞, 뒤 그리고 요소들 사이에 모두 여유공간을 두고 배치됨

<!--생략-->
...   
<h3>justify-content : flex-start</h3>
<div id="container1" class="wrapper">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
</div>
<h3>justify-content : flex-end</h3>
<div id="container2" class="wrapper">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
</div>
<h3>justify-content : center</h3>
<div id="container3" class="wrapper">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
</div>
<h3>justify-content : space-between</h3>
<div id="container4" class="wrapper">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
</div>
<h3>justify-content : space-around</h3>
<div id="container5" class="wrapper">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
</div>
...
<!--생략-->

/*--생략--*/
...
.wrapper{ display: flex; }
#container1{justify-content: flex-start;}
#container2{justify-content: flex-end;}
#container3{justify-content: center;}
#container4{justify-content: space-between;}
#container5{justify-content: space-around;}
...
/*--생략--*/

align-items

플렉스 요소의 수직 방향 정렬 방식을 설정한다.

종류	설명
stretch	기본 설정 값으로 플렉스 요소의 높이가 컨테이너의 높이와 같게 변경된 뒤 연어어 배치
flex-start	플렉스 컨테이너의 위쪽에 배치
flex-end	플렉스 컨테이너의 아래쪽에 배치
center	플렉스 컨테이너의 가운데에 배치
baseline	플렉스 컨테이너의 기준선에 배치

<!--생략-->
...   
<h3>align-items : stretch</h3>
<div id="container1" class="wrapper">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
</div>
<h3>align-items : flex-start</h3>
<div id="container2" class="wrapper">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
</div>
<h3>align-items : flex-end</h3>
<div id="container3" class="wrapper">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
</div>
<h3>align-items : center</h3>
<div id="container4" class="wrapper">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
</div>
<h3>align-items : baseline</h3>
<div id="container5" class="wrapper">
    <div><p style="font-size: 14px;">1</p></div>
    <div><p style="font-size: 27px;">2</p></div>
    <div><p style="font-size: 19px;">3</p></div>
</div>
...
<!--생략-->

/*--생략--*/
...
.wrapper{ display: flex; }
#container1{align-items: stretch; /*기본*/}
#container2{align-items:flex-start; /*contents 크기만큼 줄어들고 위로 붙음*/ }
#container3{align-items:flex-end; /*contents 크기만큼 줄어들고 아래로 붙음*/ }
#container4{align-items:center; /*contents 크기만큼 줄어들고 가운데로 붙음*/ }
#container5{align-items:baseline; /*contents 크기만큼 줄어들고 기준선으로 정렬*/ }
...
/*--생략--*/

align-self & order

align-self는 개별적으로 설정해주어 플렉스 요소마다 서로 다른 align 속성값을 설정한다. order는 플렉스 요소들의 순서를 바꿀 수 있다.

<!--생략-->
...   
<div id="container">
    <div id="box1"><p>1</p></div>
    <div id="box2"><p>2</p></div>
    <div id="box3"><p>3</p></div>
</div>
...
<!--생략-->

/*--생략--*/
...
#container{isplay: flex;}
#box1{order: 2;}
#box2{order: 3;}
#box3{align-self: flex-end; order: 1;}
...
/*--생략--*/

#box3 요소에만 개별적으로 align-self를 활용하여 flex-end값을 정해준 것을 볼 수 있고 order의 속성값은 순서를 나타낸다.