요소의 정렬되는 방향, 순서, 요소간의 간격을
수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 방식.
- Flexbox를 이용할 때 반드시 알아야 되는 것!
- Flexbox의 구성
- flex-container : 정렬이 필요한 요소를 감싸는 요소
- item : 정렬을 적용할 요소
(flex-container와 item에 사용되는 flex 관련 css 속성이 나누어져 있음.)
- Flexbox의 축
- 중심축
- 교차축, 반대축
justify-content
main axis 방향으로 item(내용)의 정렬 방법을 조정함
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.center: 요소들을 컨테이너의 가운데로 정렬합니다.space-between: 요소들 사이에 동일한 간격을 둡니다.space-around: 요소들 주위에 동일한 간격을 둡니다.space-evenly: 요소들 주위에 (전체)동일한 간격을 둡니다.
align-items
item들을 cross axis (반대축, 교차축) 방향으로 정렬하는 방법을 지정하는 속성
flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.stretch: 요소들을 컨테이너에 맞도록 늘립니다.
flex-direction
main axis의 방향과 시작 위치를 지정하는 속성
row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.column: 요소들을 위에서 아래로 정렬합니다.column-reverse: 요소들을 아래에서 위로 정렬합니다.
column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀝니다.
Flex의 방향이 column일 경우 justify-content
의 방향이 세로로, align-items
의 뱡향이 가로로 바뀝니다.
개별적 요소를 지정한 경우
order: -1; 왼쪽
order: 0; 원래자리
order: 1; 오른쪽
세로상의 정렬을 담당하는 align-items의 인자값을 받으며 개별로 정렬할 수 있는 align-self을 이용한다
flex-wrap
내부 item들을 포장하는 속성
item들이 강제로 한줄에 배치되게 할 것인지
nowrap(기본값): 모든 요소들을 한 줄에 정렬합니다.wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
flex-flow
flex-container의 main axis의 방향, 순서와 여러줄로 배치할지에 대한 여부를
한번에 설정하는 속성
flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있습니다. 이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받습니다.
예를 들어, 요소들을 가로선 상의 여러줄에 걸쳐 정렬하기 위해 flex-flow: row wrap을 사용할 수 있습니다.
align-content
cross axis 방향으로 item이 포장된(wrap)라인을 정렬하는 방법
<조건 : flex-wrap 속성이 wrap또는 wrap-reverse 일때만 사용가능>
align-content를 사용하여 여러 줄 사이의 간격을 지정할 수 있습니다.
이 속성은 다음의 값들을 인자로 받습니다:
flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.space-between: 여러 줄들 사이에 동일한 간격을 둡니다.space-around: 여러 줄들 주위에 동일한 간격을 둡니다.space-evenly: 여러 줄들 주위에 (전체)동일한 간격을 둡니다.stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
이 속성을 사용하는 방법이 어려울 수 있습니다. align-content는 여러 줄들 사이의 간격을 지정하며, align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정합니다. 한 줄만 있는 경우, align-content는 효과를 보이지 않습니다.
order
flex-container 내부 item의 순서를 지정하는 속성
item의 순서를 지정하는 속성 (기본값 0, 정수, 양수/음수 가능)
flex-grow(팽창)
item이 flex-container 내부에서 비어있는 공간을 매꿀 수 있도록
팽창하는 정도를 지정하는 속성
지정된 비율에 맞게 팽창함(기본값 0 -> 팽창 X)
flex-shrink(수축)
item이 수축하는 정도를 지정하는 속성(기본값 1)
flex-basis
item의 main axis 방향으로의 기본 점유율(크기)을 지정하는 속성
(각종 크기 단위 px, %, vh, em, rem 등 사용 가능)
align-self
각각 item별로 cross axis 방향으로 정렬을 지정하는 속성
flex-start: 선택한 item을 컨테이너의 꼭대기에 정렬합니다.flex-end: 선택한 item을 컨테이너의 바닥에 정렬합니다.center: 선택한 item을 세로선 상의 가운데에 정렬합니다.
