CSS - Flex(Flexible Box)

flex

; 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공.

Flex 의 개념

1. Container

 - display, flex-flow, justify-content 등의 속성을 사용.

2. Items

 - order, flex, align-self 등의 속성을 사용.

 

Container - display

; flex container 를 정의. 값의 차이가 내부의 Items 에 영향을 주지 않음.

display: flex = block 특성. 수직 쌓임.

display: inline-flex = inline 특성. 수평 쌓임.

-

[Flex Container]

 

flex flow

; 단축 속성으로 Flex Items의 주 축(main-axis)을 설정하고 Items의 여려 줄 묶음(줄 바꿈)도 설정한다.

flex-direction : Items의 주 축(axis)을 설정.

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

flex-direction

; Items의 주 축(axis)을 설정.

row : Items를 수평축(왼쪽에서 오른쪽)으로 표시.

row-reverse : Items를 row의 반대 축으로 표시.

column : Items를 수직축(위에서 아래)으로 표시.

column-reverse : Items를 column의 반대 축으로 표시.

flex-wrap

; Items의 여러 줄 묶음(줄 바꿈) 설정.

nowrap : 모든 Items 를 여러 줄로 묶지 않음. 한줄에 표시.

wrap : Items를 여러 줄로 묶음.

wrap-reverse : Items를 wrap 의 역 방향으로 여러 줄로 묶음.

justify-content

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

flex-start : Items를 시작점으로 정렬.

flex-end : Items를 끝점으로 정렬.

center : Items를 가운데 정렬.

space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬.

space-around : Items를 균등한 여백을 포함하여 정렬.

align-content

; 교차 축(cross-axis)의 정렬 방법을 설정. *flex-wrap  속성을 통해 Items가 여러 줄이고 여백이 있을 경우만 사용 가능.

stretch : Container의 교차 축을 채우기 위해 Items를 늘림. 기본값.

flex-start : Items를 시작점으로 정렬.

flex-end : Items를 끝점으로 정렬.

center : Items를 가운데 정렬.

space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬.

space-around : Items를 균등한 여백을 포함하여 정렬.

align-items

; 교차 축(cross-axis)의 Items의 정렬 방법을 설정. *Items가 한 줄일 경우 많이 사용.

stretch : Container의 교차 축을 채우기 위해 Items를 늘림. 기본값.

flex-start : Items를 시작점으로 정렬.

flex-end : Items를 끝점으로 정렬.

center : Items를 가운데 정렬.

baseline : Items를 문자 기준선에 정렬.

-

[Flex Items]

 

order

; Items의 순서를 설정. Items에 숫자를 지정하고 숫자가 클수록 순서가 밀린다. 음수 허용.

flex-grow

; Item의 증가 너비 비율을 설정. 숫자가 크면 더 많은 너비를 가짐.

flex-shrink

; Item이 감소하는 너비의 비율을 설정. 숫자가 크면 더 많은 너비가 감소함.

[참고] heropy.blog/2018/11/24/css-flexible-box/

[참고] blogpack.tistory.com/863

 

flex-basis

; Item의 (공간 배분 전) 기본 너비를 설정.

flex-basis: 0; 이 아닌 flex-basis: 100px; 값이 주어질 경우 값을 제외한 나머지 공간을 배분.

flex

; Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성.

(flex-grow flex-shrink flex-basis)

 

align-self

; 교차 축(cross-axis)에서 개별 Item의 정렬 방법을 설정. 필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 사용.

auto : Container의 align-items 속성을 상속 받음.

stretch : Container의 교차 축을 채우기 위해 Items를 늘림.

flex-start : Items를 시작점으로 정렬.

flex-end : Items를 끝점으로 정렬.

center : Items를 가운데 정렬.

baseline : Items를 문자 기준선에 정렬.