HTML/CSS(CSS 레이아웃 정리 2편)

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.