CSS: FLEX

밍가적 사고·2024년 8월 26일

html/css

목록 보기
1/1

Flex

Main Axis, Cross Axis

주축은 flex-direction 속성에 정의되고,
교차축은 수직으로 진행된다.
flex-direction에 따라 주축이 변경됨

flex-direction의 종류
- row
- column
- row-reverse
- column-reverse

flex-wrap


출처:
설정하지 않으면 기본값은 nowrap
wrap: 위에서 아래로. 여러 줄로 줄바꿈
wrap-reverse: 아래에서 위로.

flex-flow
flex-flow: flex-direction flex-wrap ;
e.g. )
flex-glow: column-reverse wrap;

justify-content


출처:ghost together

align

align-items
align-content : 두 줄 이상일 때 적용 가능.
align-self : 자식 속성에게 적용하는 것.

profile
FE junior developer

0개의 댓글