Flex Box

Flex

Flex는 Container와 Items로 나뉩니다. 여기서 Container는 Items를 감싸는 부모이며 Items를 정렬하기 위해서는 Containder는 필수입니다.
주의할 부분은 Container와 Items에 적용하는 속성이 구분되어 있다는 것입니다.

Flex Container

속성	의미
display	Flex Container를 정의
flex-flow	flex-direction와 flex-wrap의 단축 속성
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줄)
gap	각 아이템 사이의 간격을 설정

display

display 속성으로 Flex Container를 정의합니다.
flex 요소 표시방법은 inline-flex 와 flex가 존재합니다.
flex로 지정된 Flex-Container는 Block 특성을 가지고(수직)
inline-flex로 지정된 Flex-Container는 inline 특성을 가집니다.(수평)
여기서 말하는 수직과 수평은 Items가 아니라 Container라는 것에 주의합시다.
두 값의 차이는 내부에 Items에는 영향을 주지 않습니다.

flex-flow

이 속성은 flex-direction과 flex-wrap을 동시에 설정합니다.
ex) flex-flow: row wrap;

felx-direction

items의 주 축을 설정

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

flex-wrap

items의 여러 줄 바꿈을 설정

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

justify-content

주 축 정렬방법 설정

값	의미
flex-start	Items를 시작점부터 정렬
flex-end	Items를 끝점부터 정렬
center	Items를 가운데 정렬
space-around	각 Item 좌우 여백을 고르게 정렬
space-between	첫 Item은 시작점에, 끝 Item은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
space-evenly	모든 여백을 고르게 정렬

align-content

교차축 정렬방법 설정

주의할 점은 flex-wrap 속성을 통해 2줄이상(wrap)이고 여백이 있을 경우에만 사용가능

값	의미
stretch	Container의 교차 축을 채우기 위해 Items를 늘림
flex-end	Items를 끝점부터 정렬
center	Items를 가운데 정렬
space-around	각 Item 좌우 여백을 고르게 정렬
space-between	첫 Item은 시작점에, 끝 Item은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
space-evenly	모든 여백을 고르게 정렬

align-items

교차축에서 items 1줄인 경우 items 정렬방법

값	의미
stretch	Container의 교차 축을 채우기 위해 Items를 늘림
flex-end	Items를 끝점부터 정렬
center	Items를 가운데 정렬
baseline	Items를 문자 기준선에 정렬

gap

각 아이템 사이의 간격 단위 :px,em,cm

Flex Itmes

속성	의미
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의 순서를 정하고 숫자가 클수록 뒤쪽으로 밀립니다.

flex

  flex : flex-grow flex-shrink flex-basis;
  flex: 1 1 20px;  /* 증가너비 감소너비 기본너비 */
  flex: 1 1;  /* 증가너비 감소너비 */
  flex: 1 20px;  /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */

flex-grow를 제외한 개별 속성은 생략할 수 있습니다.
만약 flex: 1;로 작성하면 flex-grow: 1;과 같습니다.
그러면 나머지 속성은 생략했으니 기본값이 적용되어 flex-shrink: 1;, flex-basis: auto;가 되겠죠?
즉 flex: 1; 혹은 flex: 1 1;은 flex: 1 1 auto;와 같다고 볼 수 있습니다만 그렇지 않습니다.

flex-basis의 기본값은 auto입니다만 단축 속성인 flex에서 그 값을 생략할 경우 0이 적용됩니다.
다시 정리하면 flex: 1; 혹은 flex: 1 1;은 flex: 1 1 0;이 된다는 것입니다.

flex-grow

Item의 증가 너비 비율을 설정
숫자가 크면 클수록 더 많은 너비를 가집니다.

ex) 아이템 3개가 있을 때 증가너비가 1,2,1 이면
첫번째는 1/4 두번째는 2/4 세번째는 1/4를 가지게됩니다.

flex-shrink

Item이 감소하는 너비의 비율 설정
숫자가 크면 더 많은 너비가 감소합니다.
감소 너비는 요소의 너비에 영향을 받기 때문에 계산하기 까다롭습니다.
영향을 받는다는 요소의 너비는 width, height, flex-basis 등으로 너비가 지정된 경우를 의미합니다.
Container의 너비가 줄어 Items의 너비에 영향을 미칠 경우, 영향을 미치기 시작한 지점부터 줄어든 거리 만큼 감소 너비 비율에 맞게 Item의 너비가 줄어듭니다.

예를 들어 Container의 너비가 줄어 Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px일 때,
요소 너비가 같은 Item이 2개이고 지정된 감소 너비가 각각 2와 1이라면,
감소 너비는 2:1 비율이며,
첫 번째 Item은 90px의 2/3인 60px 만큼 너비가 감소하고,
두 번째 Item은 90px의 1/3인 30px 만큼 너비가 감소합니다.

flex-basis

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

align-self

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

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