#컨테이너 속성
| 속성 | 값 | 설명 | |
|---|---|---|---|
display | flexinline-flex | Flex 컨테이너 설정 | |
flex-direction | rowrow-reversecolumncolumn-reverse | 주 축 방향 설정 | |
flex-wrap | nowrapwrapwrap-reverse | 줄 바꿈 설정 | |
flex-flow | row nowrapcolumn wrap... | direction + wrap 단축 속성 | |
justify-content | flex-startflex-endcenterspace-betweenspace-aroundspace-evenly | 주 축 정렬 | |
align-items | flex-startflex-endcenterstretchbaseline | 교차 축 정렬 | |
align-content | flex-startflex-endcenterstretchspace-betweenspace-around | 여러 줄 교차 축 정렬 | |
gap | 10px1rem10px 20px | 아이템 간 간격 |
#아이템 속성
| 속성 | 값 | 설명 | |
|---|---|---|---|
order | 01-1... | 아이템 순서 | |
flex-grow | 012... | 여유 공간 비율 (확장) | |
flex-shrink | 01... | 축소 비율 | |
flex-basis | auto0100px50% | 기본 크기 | |
flex | 10 1 auto1 1 0... | grow shrink basis 단축 속성 | |
align-self | autoflex-startflex-endcenterstretchbaseline | 개별 아이템 교차 축 정렬 |
#자주 쓰는 패턴
| 속성 | 값 | 설명 | |
|---|---|---|---|
가운데 정렬 | justify-content: centeralign-items: center | 완전 가운데 정렬 | |
양 끝 정렬 | justify-content: space-between | 첫 번째와 마지막 아이템 양 끝 | |
균등 분배 | justify-content: space-evenly | 모든 간격 동일 | |
세로 배치 | flex-direction: column | 세로 방향 배치 | |
자동 줄바꿈 | flex-wrap: wrap | 넘치면 자동 줄바꿈 | |
동일 너비 | flex: 1 | 모든 아이템 동일 너비 | |
고정 + 유동 | flex: 0 0 200pxflex: 1 | 사이드바 + 메인 레이아웃 |
#flex 단축값
| 속성 | 값 | 설명 | |
|---|---|---|---|
flex: initial | = flex: 0 1 auto | 축소만 가능, 기본 크기 유지 | |
flex: auto | = flex: 1 1 auto | 확대/축소 모두 가능 | |
flex: none | = flex: 0 0 auto | 확대/축소 불가, 고정 크기 | |
flex: 1 | = flex: 1 1 0 | 여유 공간 균등 분배 |
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.