flex-box

Study/css

더 멋진 세상을 꿈꾸는 개발자 2020. 4. 3. 21:52

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

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

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

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

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

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

**float을 먼저 알아보자.

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

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

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

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

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

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

containter에 적용시키는 속성값들

item에 적용시키는 속성값들

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

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

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