[CSS] CSS3의 핵심적 변화 - Flex(Flexible Box)

1. CSS3 Flexible Box의 등장

---

---

 대부분의 웹 사이트는 전체 레이아웃이 수직 구성으로 ‘위-아래’로 스크롤하여 사용하게 된다. 레이아웃을 구성할 때 가장 많이 사용되는 요소들은 보통 블록(block) 개념으로 표시되고, 이는 수직으로 쌓이기 때문에 상대적으로 쉽게 구성할 수 있다. 하지만 수평 구조를 만들 때는 어떨까? 수평 구조를 만드는 속성이 명확하지 않았기 때문에 보통은 float 혹은 inline-block 등을 통해서 구성하곤 했다.

 

 이 문제를 해결할 수 있는 명확한 속성의 등장이 바로 Flex(Flexible Box)이다. 우리는 이 Flex를 통해서 수평 구조를 자유롭게 구성할 수 있게된다.

---

2. CSS3 Flexible Box의 사용

---

 Flex는 2개의 개념으로 나뉘게 된다. 첫 번째는 Container, 두 번째는 Items이다. 이 두 가지에 적용하는 속성이 구분되어 있다는 것을 잘 알고 있어야 한다. 

Flex Contatiner

문서의 영역 중에서 flexbox가 놓여 있는 영역을 Flex Container라고 부른다. 이에 적용하는 속성은 다음과 같다.

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

: row는 items를 수평 축으로 표시하고, 이때 주 축은 수평이고 교차 축은 수직이다.

반대로 column은 items를 수직 축으로 표시하고, 주 축은 수직이고 교차 축은 수평이 된다.

display

: flex container를 정의한다.

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

 수직 , 수평은 container 끼리의 관계이고 Items에는 영향을 주지 않는다.

flex-flow

: flex-direction과 flex-wrap의 축약 속성으로, 첫 번째 값이 direction 두 번째 값이 wrap이다.

값	의미	기본 값
flex-direction	Items의 주 축을 설정하여, 나열되는 방향을 변경	row
flex-wrap	Items의 줄 바꿈을 설정	nowrap

flex-direction

: items의 주 축을 설정하고 나열되는 방향을 변경한다.

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

flex-wrap

: items의 줄 바꿈을 설정한다.

값	의미	기본 값
nowrap	모든 items를 한 줄에 표시	nowrap
wrap	items를 여러 행에 나열
wrap-reverse	items를 wrap의 역 방향으로 여러 행에 나열

justify-content

: 주 축의 정렬 방법을 설정한다.

값	의미	기본 값
flex-start	items를 시작 점으로 정렬	flex-start
flex-end	items를 끝 점으로 정렬
center	items를 가운데 정렬
space-between	시작 item은 시작점에, 마지막 item은 끝 점에 정렬 나머지 items는 사이에 같은 간격으로 정렬
space-around	items를 균등한 여백을 포함하여 정렬

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

: 주 축이나 교차 축이 시작하는 지점과 끝나는 지점을 의미한다.

align-content

: 교차 축의 정렬 방법을 설정한다. flex-wrap 속성을 통해 items가 2줄 이상일 경우이고 여백이 있는 경우에만 사용 가능하다.

값	의미	기본 값
stretch	container의 교차 축을 채우기 위해 items를 늘림	stretch
flex-start	items를 시작 점으로 정렬
flex-end	items를 끝 점으로 정렬
center	items를 가운데 정렬
space-between	시작 item은 시작점에, 마지막 item은 끝 점에 정렬 나머지 items는 사이에 같은 간격으로 정렬
space-around	items를 균등한 여백을 포함하여 정렬

align-items

: 교차 축의 정렬 방법을 설정한다. items가 한 줄 경우 많이 사용한다.

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

Flex Items

 문서의 영역 중에서 Flex Container안에 들어있는 요소들을 Flex items라고 한다. 이에 적용하는 속성은 다음과 같다.

order

: items의 순서를 정한다. items에 숫자를 지정하고 숫자가 클수록 순서가 밀린다. 음수도 허용된다.

값	의미	기본 값
order	items의 순서를 설정	0

flex

: items의 너비(증가, 감소, 기본)를 설정하는 축약 속성으로 증가 너비(grow), 감소 너비(shrink), 기본 너비(basis) 순으로 사용된다.

값	의미	기본 값
flex-grow	items의 증가 너비 비율을 설정	0
flex-shrink	items의 감소 너비 비율을 설정	1
flex-basis	items의 기본 너비 설정	auto

 flex-grow를 제외한 개별 속성은 생략할 수 있다. 생략된 속성들은 default(기본 값)을 갖게 된다.

여기서 주의할 점이 두 가지 있다.

•  첫 번째, flex-basis의 기본 값은 auto이지만, 축약 속성으로 사용 시 생략할 경우 0으로 적용된다.  예를 들어, flex : 1; 혹은 flex : 1 1;의 값은 flex : 1 1 auto;가 아니라 flex :  1 1 0;이 되는 것이다.
•  두 번째, flex : 1 10px;  즉 두 번째 속성 값에 단위를 사용하면 감소 너비가 적용되는 것이 아니라 기본 너비로 적용된다. 따라서 사용 시에 유의해야 한다.

flex-grow

: items의 증가 너비 비율을 설정한다.

값	의미	기본 값
flex-grow	items의 증가 너비 비율을 설정	0

flex-shrink

: items의 감소 너비 비율을 설정한다. 숫자가 클수록 더 많은 너비가 감소한다.

값	의미	기본 값
flex-shrink	items의 감소 너비 비율을 설정	1

flex-basis

: items의 기본 너비를 설정한다. 값이 auto일 경우 width, height 등의 속성으로 item의 너비를 설정할 수 있다. 하지만 단위 값이 주어질 경우 설정할 수 없다.

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

align-self

: 교차 축에서 개별 item의 정렬 방법을 설정한다. 필요에 의해 일부 item만 정렬 방법을 변경할 경우 사용한다. 이 속성은 align-items 속성보다 우선한다.

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