[CSS] Flexbox 속성 정리

flexboxfroggy.com/#ko

Flexbox Froggy

위 사이트는 css의 flexbox 속성을 이용한 간단한 게임이 있는 사이트입니다.

위 사이트에 있는 속성을 중심으로 flexbox의 속성을 정리해보았습니다.

 

1. justify-content

주축에 대해서 항목들을 어디로 정렬할지 결정합니다.

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬
• center: 요소들을 컨테이너의 가운데로 정렬
• space-between: 요소들 사이에 동일한 간격을 둠
• space-around: 요소들 주위에 동일한 간격을 둠

2. align-items

교차축에 대해서 항목들을 어디로 정렬할지 결정합니다.

• flext-start: 요소들을 컨테이너 꼭대기로 정렬
• flex-end: 요소들을 컨테이너의 바닥으로 정렬
• center: 요소들을 컨테이너의 세로선 가운데로 정렬
• baseline: 요소들을 컨테이너의 시작 위치에 정렬
• stretch: 요소들을 컨테이너에 맞도록 늘림

3. flex-direction

플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향을 선택합니다.

• row: 요소들을 가로로 정렬
• row-reverse: 요소들을 가로로 거꾸로 정렬
• column: 요소들을 세로로 정렬
• column-reverse: 요소들을 세로로 거꾸로 정렬

4. order

플레스 또는 그리드 컨테이너 안에서 현재 요소의 순서를 정합니다.

order: 숫자 형식으로 쓸 수 있습니다.

ex) order: -1

order: 0

order:4

 

5. align-self

항목 한 개를 정렬

아래 속성들은 align-items의 속성들과 같은 의미를 가진다고 보시면 됩니다.

• flex-start
• flex-end
• center
• baseline
• stretch: 디폴트 값

6. flex-wrap

아이템들이 한 줄에 배치될 건지, 여러 줄로 나누어 표현할 건지를 결정합니다.

• nowrap: 모든 요소들을 한 줄에 정렬
• wrap: 요소들을 여러 줄에 걸쳐 정렬
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬

7. flex-flow

flex-direction과 flex-wrap 속성을 압축하여 하나의 속성으로 나타낸 것입니다.

flex-flow: flex-direction속성 flex-wrap속성; 의 형식으로 표현

ex) flex-flow: row wrap;

 

8. align-content

flex-wrap 속성의 동작을 변경할 수 있으며 플렉스 요소를 정렬하는 대신에 플렉스 라인을 정렬

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬
• center: 여러 줄들을 세로선 상의 가운데에 정렬
• space-between: 여러 줄들 사이에 동일한 간격을 둠
• space-around: 여러 줄들 주위에 동일한 간격을 둠
• stretch: 여러 줄들을 컨테이너에 맞도록 늘림