[CSS] Flex

Flexbox

---

구성

1. Flex Container : display를 flex로 설정하면 자동으로 부모 요소가됨
2. Flex Items : 자식 요소들

 

Flex Container 속성

---

• Flex-direction : row, column, row-reverse, column-reverse
• Flex-wrap : 줄바꿈 속성 nowrap, wrap, wrap-reverse
• Flex-flow : direction과 wrap 속성 동시에 사용할 수 있는 속성
• Justify-content : 메인 축 기준 아이템 배치, 간격 속성 flex-start, flex-end, center, space-between, space-around, space-evenly
• Allign-items : 교차 축 (한 줄)기준 아이템 배치, flex-start, flex-end, center, stretch, baseline (item의 text 기준)
• Allign-content : wrap속성을 사용하여 아이템들이 여러 줄로 배치될 경우 사용
• Align-self : 하나의 item에게만 개별 속성을 주고 싶을 때

 

Flex item 속성

---

• Order : item들의 순서를 숫자로 지정해 줄 수 있음, default는 0
• Flex-grow : item을 컨테이너 사이즈에 맞게 늘이는 기능
• Flex-shrink : item이 축소되는 기능, container 보다 아이템들 크기가 더 클 때 사용함
• Flex-basis : item들의 기본 사이즈를 지정하는 속성
• Flex : grow, basis 값을 동시에 변경할 수 있는 속성