1. flexbox란?
flexbox는 CSS 레이아웃 모델 중 하나로, 복잡한 레이아웃을 보다 쉽게 만들 수 있도록 도와주는 기능을 제공합니다.
flexbox를 통해 사용자는 컨테이너 내의 아이템들이 공간을 어떻게 채울지, 어떻게 정렬할지 등을 효율적으로 제어할 수 있습니다.
flexbox는 중심축(main axis)와 교차축(cross axis)을 기준으로 아이템을 배치합니다.
2. flexbox 속성
2-1. flex-direction
flex-driection 속성을 사용하여 주축의 방향을 결정할 수 있습니다.
기본값은 row로 아이템들이 가로로 정렬됩니다. row-reverse는 반대 방향으로 정렬되고, column은 세로 정렬, column-reverse는 세로 반대 방향 정렬입니다.
See the Pen flexbox1 by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
See the Pen flexbox2 by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
2-2. flex-wrap
요소들이 여러 줄로 나뉘어 배치될지, 한 줄에 모두 배치될지 결정합니다. 기본 값은 nowrap으로 한 줄에 모두 배치됩니다.
wrap으로 값을 변경 할 경우 여러 줄로 나뉘어 배치되고, wrap-reverse는 반대 방향으로 여러 줄로 나뉘어 배치됩니다.
See the Pen flexwrap by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
2-3. flex-flow
flex-direction과 flex-wrap의 단축 속성으로 기본값은 row nowrap입니다.
See the Pen flexflow by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
2-4. justify-content
'중심축'을 따라 요소들이 어떻게 정렬될지 결정합니다.
flex-start가 기본값이며 아이템들이 컨테이너의 시작 부분에 정렬됩니다.
flex-end는 아이템들이 컨테이너의 끝 부분에 정렬되며,
center는 아이템들이 컨테이너 중앙에 정렬됩니다.
justify-content: center 예시
See the Pen justify center by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
space-between은 아이템들이 컨테이너와 시작과 끝 부분에 정렬되고, 나머지 아이템들은 동일한 간격으로 정렬됩니다.
space-around는 아이템들이 동일한 간격으로 정렬됩니다. 이 간격은 아이템들 사이뿐 아니라 컨테이너 시작 부분과 첫 번째 아이템, 컨테이너 끝 부분과 마지막 아이템 사이에도 적용됩니다.
space-evenly는 around와 비슷하지만 시작과 끝 부분을 포함해서 아이템들 사이의 간격이 동일합니다.
See the Pen flexspace by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
2-5. align-items
'교차축'을 따라 요소들이 어떻게 정렬될지 결정합니다.
center는 아이템들이 교차 축 중앙에 정렬됩니다.
See the Pen aligncenter by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
baseline은 아이템들이 컨테이너의 교차 축에서 자신의 기준선 위치에 따라 정렬됩니다.
See the Pen alignbaseline by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
2-6. align-content
여러 줄의 아이템들이 컨테이너의 교차축에 따라 어떻게 정렬될지 지정합니다.
align-items는 각 아이템에 개별적으로 적용되어 교차축에서 어떻게 위치할지를 결정합니다.
align-content는 여러 줄의 아이템들에 대한 정렬을 제어하여, 아이템들이 형성하는 전체 줄들이 교차 축에서 어떻게 배치될지를 결정합니다.
즉, align-items는 각 아이템의 정렬을, align-content는 여러 줄의 아이템들을 한 묶음으로 보고 그 묶음의 정렬을 제어한다고 생각하면 이해하기 쉽습니다.
3. flex 아이템
flex 아이템에 적용되는 속성들 중에서 중요한 속성들을 위주로 알아보겠습니다.
3-1. flex-grow
요소가 flex 컨테이너 내의 여백을 채우기 위해 얼마나 자라날 수 있는지 결정합니다. 기본값은 0입니다.
See the Pen Untitled by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
3-2. flex-shrink
요소가 flex 컨테이너 내에서 공간이 부족할 경우 얼마나 줄어들 수 있는지 결정합니다. 기본값은 1입니다.
See the Pen Untitled by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
3-3. flex-basis
요소의 초기 크기를 결정합니다. 기본값은 auto입니다.
See the Pen Untitled by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
3-4. flex
flex-grow, flex-shrink, flex-basis의 단축 속성입니다. 기본값은 0 1 auto입니다.
3-5. align-self
align-item 속성을 무시하고 해당 요소만 교차축을 따라 어떻게 정렬될지 결정합니다. 기본값은 auto이며 align-items의 값을 따릅니다.
See the Pen Untitled by sungmin kim (@sungmin-kim-the-styleful) on CodePen.
'Html' 카테고리의 다른 글
HTML/CSS(CSS 레이아웃 정리 1편) (0) | 2023.11.10 |
---|---|
HTML/CSS(:root를 활용한 사용자 정의 변수) (0) | 2023.11.02 |
15. HTML/CSS(Grid 레이아웃) (0) | 2023.05.11 |
14. HTML/CSS(video, tranform, 애니메이션) (0) | 2023.05.11 |
13. HTML/CSS(Sass) (0) | 2023.05.10 |