[CSS] Flexbox 정렬하기 연습
Flexbox Froggy 연습하기
flex-direction
: 정렬할 방향을 지정한다.
- row (요소를 텍스트의 방향과 동일하게 정렬 / 보통 가로정렬)
- row-reverse (↔ 뒤집기 / 텍스트의 반대방향)
- column (요소를 위에서 아래로 정렬 / 보통 세로정렬)
- column-reverse( ↕ 뒤집기)
justify-content
: Flex 요소들을 가로선 상에서 정렬한다.
- flex-start (요소를 컨테이너의 왼쪽으로 정렬)
- flex-end (요소를 컨테이너의 오른쪽(끝)으로 정렬)
- center (요소를 컨테이너의 가운데로 정렬)
- space-between (요소들 사이에 동일한 간격)
- space-around (요소들 주위에 동일한 간격)
- space-evenly
align-items
: Flex 요소들을 세로선 상에서 정렬한다.
- flex-start (요소를 컨테이너의 꼭대기로 정렬)
- flex-end (요소를 컨테이너의 바닥으로 정렬)
- center (요소를 컨테이너의 세로선 상 가운데로 정렬)
- baseline (요소를 컨테이너의 시작 위치에 정렬)
- stretch (요소를 컨테이너에 맞도록 늘림)
align-self
: 지정한 요소에만 개별적으로 적용할 수 있는 속성 (align-items와 사용하는 값 동일)
flex-wrap
- nowrap (모든 요소들을 한 줄에 정렬)
- wrap (요소들을 여러 줄에 걸쳐 정렬)
- wrap-reverse (요소들을 여러 줄에 걸쳐 반대로 정렬 / ↕ 반전)
flex-flow
flex-direction 과 flex-wrap 이 자주 같이 사용되기 때문에 flex-flow 로 두 속성의 값을 공백문자로 구분하여 받아와서 작성할 수 있다.
예) 가로선 상에서 여러줄에 걸쳐 정렬
flex-flow: row wrap;
align-content
: 여러 줄 사이의 간격을 지정할 수 있다.
- flex-start (여러 줄들을 컨테이너 꼭대기에 정렬)
- flex-end (여러 줄들을 컨테이너 바닥에 정렬)
- center
- space-between (여러 줄들 사이에 동일한 간격)
- space-around (여러 줄들 주위에 동일한 간격)
- stretch (여러 줄들을 컨테이너에 맞도록 늘림)