[CSS] FLEX

- 플렉스의 장점

 기존의 float, inline-block으로 수평정렬을 하는 방법보다 쉽고 간편하다

 

기본셋팅

inline-block

각각의 아이템들이 글자화되어서 띄어쓰기가 적용된다.

이런 문제를 해결하기 위해서

폰트사이즈를 0;으로 초기화하면 정상적으로 수평화가 된다.

만약 아이템들에 숫자를 적용한다하면 아이템 안에 있는 숫자들도 폰트사이즈가 0이되면서 표시가 안된다.

그래서 아이템부분에 font-size를 특정사이즈로 원상복귀해야한다.

 

float

요소가 수평으로 쌓이긴 하는데 컨테이너가 각가의 요소를 담지 못하는 문제가 발생한다.

문제를 해결하기위해 컨테이너 전에 클리어픽스를 적용해야한다.

 

flex

컨테이너 부분에 디스플레이 flex를 적용하면 바로 원하는 그림이 나온다.

---

flex는 기본적으로 container와 items 두개로 구분된다.

display: flex;가 적용되는 부분은 container이다.

 

값	의미
flex	block 특성의 flex container를 정의
inline-flex	inline 특성의 flex container를 정의

flex: container가 블록요소처럼 작동한다. 내부 아이템은 영향이 없다.

inline-flex: container가 인라이요소처럼 작동한다.

---

flex-flow

값	의미	기본값
flex-direction	items의 주축을 설정	row
flex-wrap	items의 여러 줄 묶음 설정	nowrap

flex-flow: 주축 여러줄묶음;

 

---

flex-direction

값	의미	기본값
row	items를 수평축으로 표시	row
row-reverse	items를 row의 반대축으로 표시
column	items를 수직축으로 표시
column-reverse	items를 column의 반대 축으로 표시

---

 

 

 

 

 

#패스트캠퍼스