[css] flexbox (feat. Flexbox Froggy)

flexbox란?

flexbox라 불리는 Flexible Box module은 flexbox 아이템 간 공간 배분과 정렬 기능을 편하게 사용할 수 있는 css요소입니다. 이 flexbox만 잘 알아두면 레이아웃을 배치하는 데 큰 어려움이 없습니다. flex는 diaplay의 속성 중 하나입니다. 

 

Keypoints

1. flexbox에는 컨테이너에 적용하는 속성과 컨테이너 내부의 아이템에 적용하는 속성이 따로 존재합니다. 

2. flexbox에는 중심축(main axis)과 반대축(cross axis)이 존재합니다.

   중심축이 수평이면 반대축은 수직, 중심축이 수직이면 반대축은 수평입니다. 

 

flexbox의 속성

justify-content

중심축에서 아이템들을 어떻게 배치하는지 설정하는 속성 (컨테이너)

아이템을 정렬하는 데 사용하는 속성

• flex-start : 아이템(요소)들을 컨테이너의 왼쪽으로 정렬합니다.
• flex-end : 아이템(요소)들을 컨테이너의 오른쪽으로 정렬합니다.
• center : 아이템(요소)들을 컨테이너의 가운데로 정렬합니다.
• space-between : 아이템(요소)들 사이에 동일한 간격을 둡니다.
• space-around : 아이템(요소)들 사이와 주위에 동일한 간격을 둡니다.

 

flex-content

줄 사이의 간격을 설정하는 속성 (컨테이너)

줄을 정렬하는 데 사용하는 속성

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

 

align-items

반대축에서 아이템들을 어떻게 배치하는지 설정하는 속성 (컨테이너)

• flex-start : 아이템(요소)들을 컨테이너의 꼭대기로 정렬합니다.
• flex-end : 아이템(요소)들을 컨테이너의 바닥으로 정렬합니다.
• center : 아이템(요소)들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
• baseline : 아이템(요소)들을 컨테이너의 시작 위치에 정렬합니다.
• stretch : 아이템(요소)들을 컨테이너에 맞도록 늘립니다.

 

flex-direction

컨테이너 안에서 요소들이 정렬해야 할 방향을 지정하는 속성 (컨테이너)

• row : 아이템(요소)들을 텍스트의 방향과 동일하게 정렬합니다.
• row-reverse : 아이템(요소)들을 텍스트의 반대 방향으로 정렬합니다.
• column : 아이템(요소)들을 위에서 아래로 정렬합니다.
• column-reverse : 아이템(요소)들을 아래에서 위로 정렬합니다.

 

flex-wrap

한 줄에 모두 정렬하기 또는 여러 줄에 포장(wrapping)해서 정렬할지 여부를 설정합니다.

• nowrap : 모든 아이템(요소)들을 한 줄에 정렬합니다.
• wrap : 아이템(요소)들을 여러 줄에 걸쳐 정렬합니다.
• wrap-reverse : 아이템(요소)들을 여러 줄에 걸쳐 반대로 정렬합니다.

 

flex-flow

flex-direction과 flex-wrap를 동시에 적용할 수 있는 속성입니다.

ex) flex-flow : row nowrap;

     flex-flow : column-reverse wrap;

 

order

아이템(요소)의 순서를 개별적으로 지정하는 속성 (아이템)

음수, 양수 모두 가능

0부터 시작  ex) order: 0;

 

align-self 

align-items가 사용하는 값들을 인자로 받으며, 아이템(요소)의 위치를 개별적으로 지정하는 속성 (아이템)

컨테이너 내에서 개별 항목의 정렬을 지정할 수 있는 속성

align-items에서 설정 한 기본 정렬을 재정의 (align-items보다 우선시 됨)

• auto : align-items 속성을 상속받음
• flex-start : 컨테이너 각 줄의 시작점에 아이템(요소)를 정렬
• flex-end : 컨테이너 각 줄의 끝점에 아이템(요소)를 정렬
• center : 컨테이너 중간(세로 기준)에 아이템(요소)를 정렬
• baseline : 기준선을 기준으로 정렬
• stretch : 컨테이너를 채우기 위해 늘이기(최소, 최대 넓이 준수)를 하며 정렬

 

추천 사이트

개구리를 배치하면서 flexbox를 확실히 익힐 수 있습니다. 꼭 해보세요👏👏

Flexbox Froggy

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN

CSS Flexbox (Flexible Box)