CSS flex

대부분의 사이트는 수직적으로 레이아웃이 구성되어 있으며 위아래로 스크롤하여 사용하게 된다. 수평 구조의 경우 table, float, inline-block을 주로 사용하고 있으나 주로 차선책일 뿐이며 flex로 레이아웃을 쉽게 구성할 수 있다.

CSS3 Flexible Box

• 요소의 크기가 불분명하거나 동적인 경우에도 효율적인 방법을 제공한다.
• Container, Items라는 두가지 개념으로 나뉜다.
  • Container: Items를 감싸는 부모 요소. 각 Item을 정렬하기 위해 꼭 필요하다. display, flex-flow, justify-content 속성 사용 가능.
  • items: order, flex, align-self 속성 사용 가능.

Flex Container

속성	의미
display	Flex Container 정의
flex-direction	Flex Items의 주 축(main-axis)을 설정
flex-wrap	Flex Items의 여러 줄 묶음(줄바꿈) 설정
justify-content	주 축(main-axis)의정렬 방법을 설정
align-content	교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상)
align-items	교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄)

display

값	의미	기본값
flex	Block 특성의 Flex Container를 정의 (수직쌓임)
inline-flex	Inline 특성의 Flex Container를 정의(수평쌓임)

flex-flow

Flex Items의 주 축(main-axis)을 설정하고 Items의 여러 줄 묶음(줄 바꿈)도 설정한다.

.flex-container {
  flex-flow: row-reverse wrap;
}

값	의미	기본값
flex-direction	Items의 주 축(main-axis)을 설정	row
flex-wrap	Items의 여러 줄 묶음(줄 바꿈) 설정	nowrap

flex-direction

Items의 주 축(main-axis)을 설정한다.

값	의미	기본값
row	items를 수평축(왼쪽에서 오른쪽으로)으로 표시	row
row-reverse	Items를 row의 반대 축으로 표시
column	Items를 수직축(위에서 아래로)으로 표시
column-reverse	Items를 column의 반대 축으로 표시

주 축(main-axis)과 교차 축(cross-axis)

• 방향에 따라 주 축과 교차 축이 달라진다.
• 값 row는 주 축이 수평이고 교차 축이 수직
• 값 column은 주 축이 수직이고 교차 축이 수평

시작점(flex-start)과 끝점(flex-end)

• 주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭한다.
• 방향에 따라 시작점과 끝점이 달라진다.
• flex-start와 flex-end는 그 시작점과 끝점을 의미한다.

flex-wrap Items의 여러 줄 묶음(줄 바꿈)을 설정한다.

값	의미	기본값
nowrap	모든 Itmes를 여러 줄로 묶지 않음(한 줄에 표시)	nowrap
wrap	Items를 여러 줄로 묶음
wrap-reverse	Items를 wrap의 역 방향으로 여러 줄로 묶음

justify-content

주 축(main-axis)의 정렬 방법을 설정한다.

값	의미	기본값
flex-start	Items를 시작점(flex-start)으로 정렬	flex-start
flex-end	Items를 끝점(flex-end)으로 정렬
center	Items를 가운데 정렬
space-between	시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
space-around	Items를 균등한 여백을 포함하여 정렬

align-content

교차 축(cross-axis)의 정렬 방법을 설정한다. flex-wrap 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우 만 사용할 수 있다. Items가 한 줄일 경우 align-items 속성을 사용한다.

값	의미	기본값
stretch	Container의 교차 축을 채우기 위해 Items를 늘림	stretch
flex-start	Items를 시작점(flex-start)으로 정렬
flex-end	Items를 끝점(flex-end)으로 정렬
center	Items를 가운데 정렬
space-between	시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
space-around	Items를 균등한 여백을 포함하여 정렬

align-items

• 교차 축(cross-axis)에서 Items의 정렬 방법을 설정한다.
• Items가 한 줄일 경우 많이 사용한다.
• Items가 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에 align-content 속성이 우선
• align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 한다.

값	의미	기본값
stretch	Container의 교차 축을 채우기 위해 Items를 늘림	stretch
flex-start	Items를 각 줄의 시작점(flex-start)으로 정렬
flex-end	Items를 각 줄의 끝점(flex-end)으로 정렬
center	Items를 가운데 정렬
baseline	Items를 문자 기준선에 정렬

Flex Items

속성	의미
order	Flex Item의 순서를 설정
flex	flex-grow, flex-shrink, flex-basis의 단축 속성
flex-grow	Flex Item의 증가 너비 비율을 설정
flex-shrink	Flex Item의 감소 너비 비율을 설정
flex-basis	Flex Item의 (공간 배분 전) 기본 너비 설정
align-self	교차 축(cross-axis)에서 Item의 정렬 방법을 설정

order

• Item의 순서를 설정
• Item에 숫자를 지정하고 숫자가 클수록 우선 순위가 낮음
• 음수 허용
• HTML구조와 상관없이 순서를 변경할 수 있어 유용

값	의미	기본값
숫자	Item의 순서를 설정	0

flex

• Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성.
• flex-basis의 기본값은 auto지만, 단축 속성인 flex에서 그 값을 생략할 경우 0이 적용된다.

값	의미	기본값
flex-grow Item의 증가 너비 비율을 설정	0
flex-shrink	Item의 감소 너비 비율을 설정	1
flex-basis	Item의 (공간 배분 전) 기본 너비 설정	auto

flex-grow

• Item의 증가 너비 비율을 설정.
• 가변 너비가 아니거나, 값이 0일 경우 효과가 없다.

값	의미	기본값
숫자	Item의 증가 너비 비율을 설정	0

flex-shrink

• Item이 감소하는 너비의 비율을 설정.
• 가변 너비가 아니거나, 값이 0일 경우 효과가 없다.
• 요소의 너비(width, height, flex-basis)에 영향을 받는다.

값	의미	기본값
숫자	Item의 감소 너비 비율을 설정	1

flex-basis

• Item의 (공간 배분 전) 기본 너비를 설정.
• 값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정 가능하다.
• 단위 값이 주어질 경우 설정할 수 없다.
• 단축 속성 내에서 flex-basis를 생략하면 값이 0이 되는 것을 주의.

값	의미	기본값
auto	가변 Item과 같은 너비	auto
단위	px, em, cm 등 단위로 지정

align-self

교차 축(cross-axis)에서 개별 Item의 정렬 방법을 설정한다. 필요에 의해 일부 Item만 정렬 방법을 변경 하려고 할 경우 align-self를 사용할 수 있으며 이 속성은 align-items 속성보다 우선 한다.

값	의미	기본값
auto	Container의 align-items 속성을 상속받음	auto
stretch	Container의 교차 축을 채우기 위해 Item을 늘림
flex-start	Item을 각 줄의 시작점(flex-start)으로 정렬
flex-end	Item을 각 줄의 끝점(flex-end)으로 정렬
center	Item을 가운데 정렬
baseline	Item을 문자 기준선에 정

---

REFERENCE
https://heropy.blog/2018/11/24/css-flexible-box/