📝 display : flex 속성은 하나의 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex 속성이 적용된 container가 부모 요소인 flex container가 되고, 하위 요소인 item은 자식 요소인 flex item이라고 부릅니다.
📜 flex container 속성
flex-direction, flex-wrap, justify-content, align-items, align-content
📜 flex item 속성
flex, flex-grow, flex-shrink, flex-basis, order
📜 flex-direction
- item 요소들의 방향을 결정 하는 속성입니다.
.container { flex-direction: row; }✔ row (기본값) : 주 축이 글의 작성 방향과 동일합니다.
✔ row-reverse : row와 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.
✔ column : 주 축이 블록 축과 동일합니다.
✔ column-reverse : column과 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.
📜 flex-wrap
- item 요소들이 container의 영역을 넘어갈 경우 줄 바꿈을 할지 결정 하는 속성입니다.
.container { flex-wrap: nowrap; }✔ nowrap (기본값) : 부모 요소 영역을 벗어나더라도 한 줄에 배치합니다.
✔ wrap : 영역을 벗어나게 되면 여러 행에 걸쳐서 배치됩니다.
✔ wrap-reverse : wrap 속성과 동일하지만 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치됩니다.
📜 justify-content
- item의 메인 축을 정렬하는 속성입니다.
.container { justify-content: flex-start; }✔ flex-start (기본값) : 시작 지점을 기준으로 정렬합니다.
✔ flex-end : 메인 축의 마지막 지점을 기준 으로 정렬합니다.
✔ center : 메인 축의 item을 가운데 정렬합니다.
✔ space-between : item들 사이에 동일한 간격 으로 정렬합니다.
✔ space-around : item 둘레에 동일한 간격 으로 정렬합니다.
📜 align-items
- item의 수직 축을 정렬 하는 속성입니다.
.container { align-items: stretch; }✔ stretch (기본값)
✔ flex-start : 수직 축의 시작 지점을 기준 으로 item을 정렬합니다.
✔ flex-end : 수직 축의 마지막 지점 을 기준으로 item을 정렬합니다.
✔ center : 수직 축의 item을 가운데 정렬합니다.
✔ baseline : 글꼴의 기준선인 baseline을 기준 으로 정렬합니다.
📜 flex-shrink
- item의 축소 너비 비율을 설정 하는 속성입니다.
- 속성 값은 양의 정수를 사용합니다.
.item { flex-shrink: 0; }기본 값은 1 이며, 값이 0일 경우 너비가 축소되지 않고 원래 크기가 유지됩니다.
속성 값이 1 이상이고 container의 전체 너비보다 item 요소의 너비가 클 경우 container요소 내부에서 item의 요소 너비가 축소됩니다.
