[CSS] Flexbox 정리

이 글은 드림코딩 by 엘리님의 강의를 정리했음을 먼저 밝힙니다.

강의링크: https://youtu.be/7neASrWEFEM

 

📌Flexbox

✅ Flexbox는 컨테이너 박스에 적용되는 속성 값들, 또 각각의 아이템들에 적용할 수 있는 속성 값들이 존재함

[컨테이너를 우리가 꾸며줄 수 있는 속성 값들]

- display                     - justify-content

- flex-direction        - align-items

- flex-wrap                - align-content

- flex-flow

 

[아이템에 지정되는 속성 값들]

- order                     - flex

- flex-grow             - align-self

- flex-shrink 

 

✅ Flexbox에는 중심축과 반대축이 있음

-> 중심축을 수평이냐 수직에 두냐에 따라서 반대축이 바뀜