flexytale project. CSS Flex-Direction, Justify-Content, Align-Items

피스타0204 2022. 6. 4. 13:14

1.Flex-Direction

flex-direction은 레이아웃의 기본축을 정합니다.

flex-direction은 column, column-reverse, row, row-reverse 4가지가 있습니다.

2. Justify-Content

flex-direction에서 정해진 기본축을 따라 구성요소를 정렬합니다. flex-direction이 정해지지 않았다면 요소의 기본값에 따라 정렬합니다.

속성값에는 flex-start, flex-end, center, space-between, space-around, space-evenly, initial, inherit 가 있습니다.

column)

row)

3. Align-Items

flex-direction이 기본축을 정하고 justify-content가 기복축에 따라 정렬한다면, align-items는 기본축의 반대축인 보조축을 기준으로 정렬합니다.

예를 들어 flex-direction:column이라면 align-items는 row의 정렬을 조절합니다.

속성값으로는 stretch, center, flex-start, flex-end, baseline, initial, inherit가 있습니다.

4. Flex-Direction, Justify-Content, Align-Items

flex 사용하는 순서(권장)
1. flex-direction
2. justify-content
3. align-items

flex 속성이 어떻게 동작하는지 볼 수 있는 사이트

flex-direction - CSS: Cascading Style Sheets | MDN

flex-direction CSS 속성은 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다.

developer.mozilla.org

주요 참고자료

Flex-Direction, Justify-Content, Align-Items

Flex-Direction:

medium.com

연습게임

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com