Flexible Box, FlexBox
<div class="container">
<div class="item">item01</div>
<div class="item">item02</div>
<div class="item">itme03</div>
</div>
기본적인 Flex 레이아웃을 만들기 위한 기본적인 HTML 구조입니다.
부모 요소인 div.container를 Flex Container(플렉스 컨테이너) 라고 부르고,
자식 요소인 div.item들을 Flex item(플렉스 아이템) 이라 부릅니다.
display : flex
Flex-Container를 정의 하는 속성
flex-direction : row, column, row-reverse, column-reverse
Items의 주 축(main-axis)을 설정합니다.
flex-wrap : nowrap(default), wrap, wrap-reverse
Items의 여러 줄 묶음(줄 바꿈)을 설정합니다.
flex-flow : row wrap 등...
flex-direction + flex-wrap의 단축 속성 items의 주축과 줄 바꿈 동시 설정
justify-content : flex-start, flex-end, center, space-between, space-around, space-evenly
주축 정렬 방법 설정 (space-evenly는 ms계열 브라우저에서 지원 x)
align-items : stretch, flex-start, flex-end, center, baseline
교차 축에서 Items의 정렬 방법을 설정합니다.
align-content : stretch, flex-start, flex-end, center, space-between, space-around, space-evenly
flex-wrap: wrap이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향을 정렬을 결정하는 속성, 교차축의 정렬 방식 설정
flex-basis
Flex 아이템의 기본 크기를 설정(flex-direction: row이면 너비, column이면 높이)
```
.flex_item{
flex-basis: 100px;
```
flex-basis값을 100px롤 설정하니 width 값이 100px이 안되는 a와 b는 100px로 늘어나고 100px이 넘는 b는 원래 크기를 유지 ( 기본값은 auto, 즉 content의 크기에 맞게 설정)
```
.flex_item{
width: 100px;
```
width: 100px로 설정하니 100px이 넘던 b도 100px로 설정됨.
flex-grow
아이템이 flex-basis의 값보다 커질 수 있는지 결정하는 속성.
flex-grow는 숫자 값이 들어가며, 몇이든 0보다 큰 값이 설정되면 해당 아이템이 Flexible 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다. 기본값은 0
숫자의 의미는 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자 비율을 뜻한다. 아래 이미지는 각 아이템의 flex-grow 값을 1 2 1 로 설정한 예이다.
flex-shrink
아이템이 flex-basis의 값보다 작아질 수 있는지 결정하는 속성. flex-grow의 쌍을 이루는 속성.
기본값이 1이기 때문에 따로 설정하지 않아도 아이템이 flex-basis보다 작아 질 수 있었습니다. 만약 0 으로 설정하면 크기의 변화가 없다.
flex
flex-grow, flex-shrink, flex-basis를 한번에 쓸 수 있는 축약형.
.flex_item{
flex: 1;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
flex: 1 1 auto;
/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
flex: 1 500px;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}
flex: 1로 설정하면 flex-basis의 값은 0이 됩니다. (기본 값 : auto)
.flex_container{
display: flex;
flex-wrap: wrap;
}
.flex_item{
flex: 1 40%;
}
flex-basis 값을 40%로 설정하면 한 행에 2개의 item이 들어갈 수 있으므로 나머지 item은 다음 줄로 넘어가게 되어 아래 이미지처럼 2단 컬럼이 유지됩니다.
flex-basis의 경우 크기를 강제할 수 없기 때문에 비율을 나누는 레이아웃을 작성할 때는 width값을 조정하고 flex-basis의 값을 auto로 설정하는 편이 원하는 결과를 얻어내기 쉽다.
flex 유용한 기법
auto margin
기존에 중앙 정렬을 하듯이 item 요소에도 margin 값을 부여하여 아래의 이미지처럼 배치가 가능하다.
.flex-container{
display: flex;
width: 600px;
margin: 0 auto;
}
.flex-item{
width: 150px;
}
.flex-item:nth-child(3){
margin-left: auto;
}
footer 배치
<div class="page">
<header class="header flex-item">header</header>
<section class="content">
...
</section>
<footer class="footer flex-item">footer</footer>
</div>
<style>
.page{
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content{
flex: 1 auto;
padding: 1rem;
}
</style>
주축을 column으로 설정하고 content 요소에 flex-grow 값을 1로 설정하면 남은 여백을 모두 차지하기 때문에 footer를 바닥에 고정 배치할 수 있다.
align-self
align-items가 전체 아이템을 정렬하는 것이라면 align-self는 개별 아이템을 정렬하는 속성이다. 기본값은 auto, 기본적으로 align-items 설정을 상속받는다.
order
각 아이템의 시각적 나열 순서를 설정하는 속성. 작은 숫자일 수록 먼저 배치되며 HTML 구조에는 영향을 끼치지 않는다.
.flex-item:nth-child(1){ order: 3; }
.flex-item:nth-child(2){ order: 1; }
.flex-item:nth-child(3){ order: 2; }
z-index
z축 정렬 속성, 숫자가 클수록 위에 위치