flex-box

 

flex-box는 CSS의 꽃이라 할 수 있음. 

 

---

flex-box 사용의 유래

 

아주 예전에는 모든 브라우저에서 호환 가능하고 강력하게 레이아웃을 만들기 위해선

 

position, float, table 등을 이용했었다.

 

근데 너무 복잡하고 할 수 없는 기능도 있었다. 

사이즈상관없이 동일한 간격으로 놓기.. 같은거..

 

 

이젠, flex-box가 있어서 이런것들을 손쉽게 할 수 잇음

 

**float을 먼저 알아보자.

 

float의 원래의 목적은 이미지와 텍스트를 함께 놓을 때, 

어떻게 함께 배치할 지 정리하기 위해 나타난 아이었다.

 

 

 

 

예전에는 레이아웃 할만한 도구들이 없었어서 float을 레이아웃을 위해 사용했었는데, 

 

이젠 flex-box가 있으므로 float은 원래 용도로만 사용~~!

 

 

---

 

 

flex-box는 크게 2가지만 이해하면 큰 틀을 알 수있다.

 

---

 

1. flex-box는 컨테이너 박스에 적용되는 속성값이 존재하고, 또 각각의 아이템들에 적용되는 속성값이 존재한다.

 

 

 

containter에 적용시키는 속성값들

 

• display
• flex-drection
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

 

item에 적용시키는 속성값들

 

• order
• flex-grow
• flex-shrink
• flex
• align-self

---

2. flex박스에는 중심축과 반대축이 있다.

수직에게 "야, 이제 네가 중심축(수평)이야" 하면 수평은 이제 반대축(수직축)이 됨.

 

 

 

 

 

내가 중심을 수직, 수평에 두느냐에 따라서 반대축이 바뀐다.