FlexBox가 무엇일까요?
인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델입니다
flex-direction
row
row는 기본적으로 왼쪽(start) 가 기준이 됩니다. 사이즈에 따라 오른쪽 그림과 같이 나옵니다
row-reverse
reverse는 기본적으로 오른쪽(end)가 기준이 됩니다. 사이즈에 따라 오른쪽 그림과 같이 나옵니다
column
column은 위아래를 기준으로 움직입니다.
column-reverse
column은 위아래를 기준으로 움직입니다.
기본적으로는 이렇게 있는데요. 이제 코드와 결과를 보면서 알아봅시다
.flexBox {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
}
.flex1 {
width: 50px;
height: 50px;
background-color: red;
}
.flex2 {
width: 50px;
height: 50px;
background-color: blue;
}<div class="flexBox">
<div class="flex1">One</div>
<div class="flex2">Two</div>
</div>
위 코드 기준 align-items 는
row일 경우 높이를 기준으로 요소들을 가운데 정렬 합니다
column일 경우 넓이를 기준으로 요소들을 가운데 정렬 합니다
위 코드 기준 justify-content 는
row일 경우 넓이를 기준으로 요소들을 가운데 정렬 합니다
column일 경우 높이를 기준으로 요소들을 가운데 정렬 합니다
align-items
- stretch
- flex-start
- flex-end
- center
justify-content
- stretch
- flex-start
- flex-end
- center
- space-around
- space-between
- space-evenly
flex
- flex: initial
- flex: auto
- flex: none
- flex: <positive-number>
flex-basis
flex-basis 속성은 항목의 크기를 결정합니다. 이 속성의 기본값은 auto이며, 이 경우 브라우저는 항목이 크기를 갖는지 확인합니다. 위의 사진 예시의 경우 항목의 크기가 100 픽셀이므로 flex-basis의 값으로 100 픽셀이 사용됩니다.
flex-grow
flex-grow값을 양수로 지정하면 flex 항목별로 주축 방향 크기가 flex-basis 값 이상으로 늘어날 수 있게 됩니다. 위의 사진 예시에서 모든 항목의 flex-grow 값을 1로 지정하면 사용가능한 공간은 각 항목에게 동일하게 분배되며, 각 항목은 주축을 따라 분배받은 값만큼 사이즈를 늘려 공간을 차지합니다.
flex-shrink
flex-grow 속성이 주축에서 남는 공간을 항목들에게 분배하는 방법을 결정한다면 flex-shrink 속성은 주축의 공간이 부족할때 각 항목의 사이즈를 줄이는 방법을 정의합니다. 만약 flex 컨테이너가 flex 항목을 모두 포함할 만큼 넉넉한 공간을 갖고 있지 않고 flex-shrink 값이 양수이면 flex 항목은 flex-basis에 지정된 크기보다 작아집니다. 또한, flex-grow 속성과 마찬가지로 더 큰 flex-shrink 값을 갖는 항목의 사이즈가 더 빨리 줄어듭니다.