CSS : Flexbox Layout

목차

1. Flexbox란?

2. Flex Container

3. Flex Item

---

1. Flexbox란?

CSS Flexbox는 레이아웃을 효율적으로 배치하기 위한 레이아웃 모델이다.

주로 행/열 단위로 아이템을 정렬할 때 사용한다.

 

⭐ 핵심 개념

용어	설명
Flex Container	Flexbox 레이아웃을 적용하는 부모 요소 (display: flex)
Flex Item	Flex Container의 자식 요소들
Main Axis	아이템이 배치되는 주 축 (기본값 : 가로)
Cross Axis	주 축에 수직인 축 (기본값 : 세로)
Direction	flex-direction에 따라 축의 방향을 결정

 

⭐ Flex Container 속성

전체적인 정렬과 흐름은 flex container에 정의한다.

속성	값 예시	설명
*display	flex, inline-flex	Flex 레이아웃을 활성화
*flex-direction	row(default), row-reverse, column, column-reverse	주 축의 방향 설정
flex-wrap	nowrap(default), wrap, wrap-reverse	줄바꿈 여부 결정
flex-flow	row wrap	flex-direction  +  flex-wrap 단축 속성
justify-content	flex-start, center, space-between, space-around, space-evenly	주 축 정렬 방식
align-items	stretch, flex-start, center, baseline, flex-end	교차 축 정렬 방식
align-content	stretch, center, space-between	여러 줄일 때 교차 축 정렬 (wrap일 때 사용)

 

 

⭐ Flex Item 속성

아이템의 크기나 순서에 관련된 속성은 flex item에 정의한다.

속성	값 예시	설명
order	숫자 (e.g. 1, -1)	아이템 정렬 순서 변경
flex-grow	0 이상 정수	남는 공간 비율로 확장
flex-shrink	0 이상 정수	공간 부족 시 줄어드는 비율
flex-basis	auto, 100px	아이템의 기본 크기 설정
flex	1, 0 1 auto	위 3개의 속성을 단축하여 설정
align-self	auto, flex-start, center	개별 아이템의 교차 축 정렬

 

---

2. Flex Container

Flex Container, 즉 부모 요소에서 사용하는 속성과 속성값들을 알아보자.

1. display 속성

해당 부모 요소를 flex container로 지정하는 속성이다.

속성값으로 flex, inline-flex를 작성한다.

 

2. flex-direction

주 축의 방향을 지정한다.

속성값으로 row(default), column, row-reverse, column-reverse를 작성한다.

 

row, row-reverse

 

column, column-reverse

3. flex-wrap

줄바꿈 여부를 지정한다.

속성값으로 nowrap(default), wrap, wrap-reverse를 작성한다.

 

 

4. justify-content

주 축 (기본 가로 방향)의 정렬 방식을 정한다.

flex-start, center, flex-end, space-between, space-around, space-evenly 등의 속성값을 작성한다.

space-around와 space-evenly의 차이는 양 끝의 공백을 절반으로/동일하게의 차이이다.

 

5. align-items

교차축 정렬방식을 지정하는 속성이다.

 

5. align-items

자식 요소가 여러 줄일 때 align 방식을 정한다.

---

2. Flex Item

flex box의 item에게 줄 수 있는 속성들을 사용해봤다.

• order : 마이너스(-)값으로 속성값을 지정하여 순서를 가장 앞으로 
• flex-grow : 남는 공간을 더 많이 차지하도록 함
  0일 경우 절대 확장하지 않음
  1이상일 경우 남는 공간을 비례적으로 차지
• flex-shrink : 공간이 부족할 경우 더 먼저 줄어듦
  0이면 절대 줄어들지 않음
  1 이상이면 비례적으로 줄어듦
• flex-basis : 기본 너비 지정 (width, height 보다 우선시 됨)
• align-self : 개별 flex item에 대해 교차축의 정렬을 지정하는 속성으로, align-items 값을 무시하고 해당 아이템만 따로 정렬

 

 

 

참고

codeit