- flexbox의 container와 item 속성들에 대해 자세히 알아본다.
▶︎ Flex 컨테이너의 속성
문서의 영역 중에서 flexbox가 놓여있는 영역을 flex 컨테이너라고 부른다. flex 컨테이너를 생성하려면 컨테이너 요소의 display 값을 flex 혹은 inline-flex로 지정하며, 이 값이 지정된 컨테이너의 일차 자식(direct children) 요소가 flex 항목이 된다.
👉 display 속성만 지정하여 flex 컨테이너를 생성하면 다른 flex 관련 속성들의 기본값들이 알아서 배치된다.
1. flex 컨테이너를 지정하는 display의 속성값
flex 컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치한다.
inline flex 컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치한다.
2. flex 방향을 지정하는 flex-direction의 속성값
row 기본값이며, 중심축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치한다.
row-reverse 중심축을 가로로 지정하고 반대로 오른쪽에서 왼쪽으로 배치한다.
column 중심축을 세로로 지정하고 위쪽에서 아래쪽으로 배치한다.
column-reverse 중심축을 세로로 지정하고 아래쪽에서 위쪽으로 배치한다.
3. flex 항목의 줄을 바꾸는 flex-wrap의 속성값
nowrap 기본값이며, 플렉스 항목을 한 줄에 표시한다.
wrap 플렉스 항목을 여러 줄에 표시한다.
wrap-reverse 플렉스 항목을 여러 줄에 표시하되, 시작점과 끝점이 바뀐다.
4. 배치 방향과 줄 바꿈을 한꺼번에 지정하는 flex-flow의 속성
👉 flex-flow 속성은 flex direction 속성과 flex-wrap 속성을 한꺼번에 지정하여 플렉스 항목의 배치 방향을 결정하거나 줄을 바꾼다. 기본값은 row nowrap이다.
5. 중심축 정렬 방법을 지정하는 justify-content의 속성값
flex-start 중심축의 시작점에 맞춰 배치한다.
flex-end 중심축의 끝점에 맞춰 배치한다.
center 중심축의 중앙에 맞춰 배치한다.
space-between 첫 번째 항목과 끝 항목을 중심축의 시작점과 끝점에 배치한 후 나머지 항목은 그 사이에 같은 간격으로 배치한다.
space-around 모든 항목을 중심축에 같은 간격으로 배치한다.
6. 교차축 정렬 방법을 지정하는 align-items 속성값
flex-start 교차축의 시작점에 맞춰 배치한다.
flex-end 교차축의 끝점에 맞춰 배치한다.
center 교차축의 중앙에 맞춰 배치한다.
baseline 교차축의 문자 기준선에 맞춰 배치한다.
stretch 플렉스 항목을 늘려 교차축에 가득 차게 배치한다.
7. 여러 줄일때 교차축 정렬 방법을 지정하는 align-content의 속성값
flex-start 교차축의 시작점에 맞춰 배치한다.
flex-end 교차축의 끝점에 맞춰 배치한다.
center 교차축의 중앙에 맞춰 배치한다.
space-between 첫 번째 항목과 끝 항목을 중심축의 시작점과 끝점에 배치한 후 나머지 항목은 그 사이에 같은 간격으로 배치한다.
space-around 모든 항목을 교차축에 같은 간격으로 배치한다.
stretch 플렉스 항목을 늘려 교차축에 가득 차게 배치한다.
▶︎ Flex item의 속성
1. order 속성
기본값은 0이며, 아이템을 지정할 수 있다.
2. flex-basis 속성
flex-basis 속성은 항목의 크기를 결정한다. 기본값은 auto이며, 이 경우 브라우저는 항목이 크기를 갖는지 확인한다.
flex 항목에 크기가 지정되어 있지 않으면, flex 항목의 내용물 크기가 flex-basis 값으로 사용되며 따라서 flex 컨테이너에서 display: flex 속성만을 지정하면 flex항목들이 각 내용물 크기만큼 공간을 차지하게 된다.
3. flex-grow 속성
모든 항목의 flex-grow 값을 1로 지정하면 사용가능한 공간은 각 항목에게 동일하게 분배되며, 각 항목은 주축을 따라 분배받은 값만큼 사이즈를 늘려 공간을 차지한다.
4. flex-shrink 속성
flex-shrink 속성은 중심축의 공간이 부족할때 각 항목의 사이즈를 줄인다.
5. 축약형 속성 flex
보통은 flex-grow, flex-shrink, flex-basis 값을 각각 사용하지 않고 이 세 속성을 한번에 지정하는 flex 축약형을 많이 사용한다. flex 축약형의 값은 flex-grow, flex-shrink, flex-basis 순서로 지정한다.
6. 특정 항목만 정렬 방법을 지정하는 align-self 속성
align-item 속성은 교차축을 기준으로 flex 항목의 정렬 방법을 결정하지만 그 중에서 특정 항목만 지정하고 싶다면 align-self 속성을 사용한다.
그래서 align-item 속성은 flex 컨테이너를 지정하는 선택자에서 사용하지만 align-self속성은 flex 항목 선택자에서 사용한다.
flex-start 교차축의 시작점에 맞춰 배치한다.
flex-end 교차축의 끝점에 맞춰 배치한다.
center 교차축의 중앙에 맞춰 배치한다.
baseline 교차축의 문자 기준선에 맞춰 배치한다.
stretch 플렉스 항목을 늘려 교차축에 가득 차게 배치한다.
[참조 링크]
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
