[CSS] Flexbox 정리

 

 

float란?

Flexbox가 등장하기 전 사용하였지만 현재는 Flexbox가 존재하기 때문에

float는 텍스트나 이미지를 배치하는 역할로 쓰이고 있습니다.

 

Flexbox란?

인터페이스 내의 아이템 간 공간 배분과 정렬 기능을 제공합니다.

 

Flexbox 종류

1. display:flex

해당 요소를 Flexbox의 환경으로 만듭니다.

 

2. flex-direction

정렬할 방향을 선택합니다.

row : 기본값, 왼쪽에서 오른쪽으로 나열

row-reverse : 오른쪽에서 왼쪽으로 나열

column : 항목들을 수직으로 위쪽에서 아래쪽으로 나열

column-reverse : 항목들을 수직으로 아래쪽에서 위쪽으로 나열

 

3. flex-wrap

Flex 요소들을 감쌀 것인지 감싸지 않을 것인지 지정합니다.

즉, 지정된 너비보다 많아 넘쳐도 한 줄로 배치할 것인지 다음 줄로 넘길 것인지 지정하는 것입니다.

nowrap : 기본값으로 플렉스 항목들이 wrap 되지 않도록 지정합니다.

wrap : 플렉스 항목들이 컨테이너 안에서 여러 줄로 열 바꿈을 할 수 있게 허용합니다.

wrap-reverse : 주축은 그대로 유지하면서 교차축을 기준으로 뒤집히게 배치됩니다.

 

4. flex-flow

flex-direction과 flex-wrap 속성을 한 번에 사용할 수 있습니다.

 

5. justify-content

플렉스 요소의 수평 방향 정렬 방식을 설정합니다.

flex-start : 기본값, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치

flex-end: 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치

center : 플렉스 요소는 플렉스 컨테이너의 가운데에서부터 배치

space-between : 플렉스 요소는 요소들 사이에만 여유공간을 두고 배치

space-around : 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유공간을 두고 배치

 

6. align-items

플렉스 요소의 수직 방향으로 정렬 방식을 설정합니다.

stretch : 기본값, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치

flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치

flex-end : 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치

center : 플렉스 요소는 플렉스 컨테이너의 가운데에 배치

baseline : 플렉스 요소는 플렉스 컨테이너의 기준선(baseline)에 배치

 

7. align-content

align-items 속성과 비슷한 동작을 하지만, 플렉스 요소를 정렬하는 대신에 플렉스 라인을 정렬합니다.

stretch : 기본값, 플렉스 라인의 높이가 남는 공간을 전부 차지

flex-start : 플렉스 라인은 플렉스 컨테이너의 앞쪽에 뭉침

flex-end : 플렉스 라인은 플렉스 컨테이너의 뒤쪽에 뭉침

center : 플렉스 라인은 플렉스 컨테이너의 가운데에 뭉침

space-between : 플렉스 라인은 플렉스 컨테이너에 고르게 분포

space-around : 플렉스 라인은 플렉스 컨테이너에 고르게 분포됩니다. 단, 양쪽 끝에 약간의 공간을 남겨둡니다.

 

추가로

order

flex-grow

flex-shirnk

flex-basis

align-self

등이 있습니다.

 

Flexbox를 완벽하게 익히고 싶다면 아래 사이트에 들어가 간단한 게임을 진행하는 것도 좋습니다.

Flexbox Froggy