Flex Layout

layout이란, 다양한 요소들을 적절한 위치에 배치하고 정렬할 수 있도록 하는 기능을 말합니다.

 

flex는 요소들을 행, 열 단위로 정렬하기 위한 1차원 레이아웃입니다.

 

flex container. flex item로 나뉘며

아이템들의 배치나 정렬을 담당합니다.

flex container의 종류에는

- flex - direction : main-axis의 방향 결정하여 main-start 기준점을 잡는 속성이고

- flex - wrap : 플랙스아이템들이 컨테이너의 영역을 넘었을 때 어떻게 할 것인지 결장하는 속성입니다.

- justify - content : 메인축기준으로 플랙스 아이템들을 정렬이고

- align - items : 크로스축기준으로 아이템들을 정렬합니다.

 

 

flex item은  플랙스 컨테이너의 자식요소의 해당되고

자신이 차지하는 크기와 순서를 변경할 수 있습니다.

종류에는

- flex : flew-grow, flex-shrink, flex-basis의 축약형 속성이고

- flex-grow : 플렉스 아이템이 늘어날 비율을 결정하는 속성 컨테이너의 빈 공간을 비율에 따라 분배하는 방식으로 결정합니다.

- flex-shrink : 플렉스 아이템이 줄어드는 비율을 결정하는 속성 컨테이너 영역을 overflow 했을 때 적용하고

- flex-basis : 플렉스 아이템의 기본 크기를 설정합니다.

- order : 메인축을 기준으로 플랙스아이템의 시작적 순서를 변경하는 속성이고

- gap : 플렉스 아이템 사이의 가격을 설정하는 속성 from grid입니다.

 

플렉스는 1차원 레이아웃이기에 간단한 레이아웃에 사용하는 것이 좋고

복잡한 레이아웃은 grid를 사용하는 것이 적합합니다.

 

이외에도 여러가지 종류들이 있습니다. 더 찾아보면서 공부하시면 도움이 될 것 같습니다.