[CSS] flex 속성 정리

부모

구분	속성	기본값	축약
방향	flex-direction	row	flex-flow *값의 위치는 제약이 없다. [예제] flex-flow: cloumn wrap flex-flow: wrap cloumn
줄바꿈	flex-wrap	nowrap
정렬	justify-content	normal	place-content [값이 1개인 경우] place-content: align-content | justify-content *align, justify 값이 동일하게 적용 [값이 2개인 경우] place-content: align-content justify-content *띄어쓰기로 값을 구분한다. [예제] gap: center gap: 8px 16px
	align-content	normal
	align-items	normal
간격	row-gap	normal	gap [값이 1개인 경우] gap: row-gap | column-gap *row, column 값이 동일하게 적용 [값이 2개인 경우] gap: row-gap column-gap *띄어쓰기로 값을 구분한다. [예제] gap: 8px gap: 8px 16px
	column-gap	normal

[참고]

Q. align-content와 align-items의 차이

Q. flex에 justify-items와 justify-self는 없나요?

 

[예제]

place-content, gap 예제

---

자식

구분	속성	기본값	축약
확장	flex-grow	0	flex *별도 정리
축소	flex-shrink	1
크기	flex-basis	auto
순서	order	0
정렬	align-self	auto

[참고]

flex

flex-grow

flex-basis

order

---

[공부 좌표]

CSS Flexible Box Layout