Flex
Flex는 2가지 개념으로 생각하면 쉽다. Container와 Items. 각 Item을 정렬하기 위해서는 Container에 그 속성값을 입력할 수 있고, Item 속성값을 통해서 개체를 개별적으로 정렬할 수도 있다.
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줄)
Flex Items의 속성들
order : Item의 개별 순서를 설정
align-self : Item의 개별 정렬 방법을 설정
flex-grow : Item의 증가 너비 비율을 설정
flex-shrink : Item의 감소 너비 비율을 설정
flex-basis : Item의 기본 너비를 설정
display
display 속성으로 Flex Container( display: flex, display: inline-flex )를 정의한다. flex로 지정된 Container는 Block 요소처럼 수직으로 쌓이고, inline-flex로 지정된 Container는 Inline(Inline Block) 요소와 같이 수평으로 쌓인다. 두 값의 차이는 내부 Items에는 영향을 주지 않는다.
flex-flow
단축 속성으로 Flex Item의 주 축을 설정하고 Items의 줄 바꿈도 설정한다.
flex-direction
row : 수평축 (왼 > 오)
row-reverse : 수평축 (오 > 왼)
column : 수직축 (위 > 아래)
column-reverse : 수직축 (아래 > 위)
- 주 축이 수직이면 교차 축은 수평이 되는 개념이다.
- 시작점(flex-start)과 끝점(flex-end) 역시 방향에 따라 달라진다.
flex-wrap
Items의 줄 바꿈을 설정한다.
nowrap : 모든 Items를 한 줄에 표시 (default)
wrap : Items를 줄 바꿈하여 묶음
wrap-reverse : Items를 역 방향으로 줄 바꿈하여 묶음
justify-content
주 축의 정렬 방법을 설정한다.
flex-start : Items를 시작점으로 정렬 (default)
flex-end : Items를 끝점으로 정렬
center : Items를 가운데 정렬
space-between : 요소들 사이에 동일한 간격
space-around : 요소들 주위에 동일한 간격
align-items
교차 축의 Items의 정렬 방법을 설정한다. Items가 한 줄일 경우 사용한다.
flex-start : Items를 컨테이너 꼭대기로 정렬
flex-end : Items를 컨테이너 바닥으로 정렬
center : Items를 컨테이너의 세로선 상의 가운데로 정렬
baseline : Items를 문자 기준선에 정렬
stretch : stretch 요소들을 컨테이너에 맞도록 늘림
align-content
교차 축의 정렬 방법을 설정한다. flex-wrap 속성을 통해 Items가 여러줄이고 여백이 있을 경우에만 사용 가능하다.
stretch : 컨테이너의 교차 축을 채우기 위해 Items를 늘림 (default)
flex-start : 시작점으로 정렬
flex-end : 끝점으로 정렬
center : 가운데 정렬
space-between : 요소들 사이에 동일한 간격
space-around : 요소들 주위에 동일한 간격 (균등한 여백)
order
Item의 순서를 설정한다. Item에 숫자를 지정하고 클수록 순서가 밀리며 음수가 허용된다. (default : 0 )
align-self
교차 축에서 개별 Item의 정렬 방법을 설정한다. 이 속성은 align-items 속성보다 우선한다. 속성값은 align-items와 동일하다.
flex
Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성이다.
flex: 증가너비 감소너비 기본너비;
.item {
flex: 1 1 20px; /* 증가너비 감소너비 기본너비 */
flex: 1 1; /* 증가너비 감소너비 */
flex: 1 20px; /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}flex-grow
Item의 증가 너비 비율을 설정한다 (default : 0 )
flex-shrink
Item의 감소 너비 비율을 설정한다 (default : 1 )
flex-basis
Item의 (공간 배분 전) 기본 너비를 설정한다 (default : auto )
