이론/CSS
[CSS] flex 속성 정리
millfeel1298
2021. 3. 9. 16:33
부모
| 구분 | 속성 | 기본값 | 축약 |
| 방향 | 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는 없나요?
[예제]
자식
| 구분 | 속성 | 기본값 | 축약 |
| 확장 | flex-grow | 0 | flex *별도 정리 |
| 축소 | flex-shrink | 1 | |
| 크기 | flex-basis | auto | |
| 순서 | order | 0 | |
| 정렬 | align-self | auto |
[참고]
[공부 좌표]