Flex Layout

HTML, CSS에서 레이아웃이란 문서 위에 상자를 적절한 위치에 배치하는 방법을 의미한다.

기본적으로 HTML의 상자 즉, 요소를 배치하는 방법은 normal flow를 따른다.

normal flow는 브라우저가 기본값으로 HTML 페이지를 배치하는 방법을 말하며 크게 2가지

block 형태와 inline 형태로 배치하는 방법이 존재한다.

 

block 요소의 경우에는 자신의 부모요소 너비를 전부 차지하게 되며 새로운 블록을 추가할 시,

개행(다음 라인)되어 추가하는 형태이다.

inline 요소는 부모의 너비 전부를 차지하지 않고 자신의 컨텐츠 영역만큼만 너비를 차지하며

새로운 inline 요소는 block요소와 달리 부모의 최대 너비를 넘지 않는 선에서 나란히 위치하게 된다.

만약 부모의 너비를 넘겼다면 개행하여 배치된다.

 

normal flow만 가지고 layout을 구성한다면 다소 정보를 인식하기 어려운 형태로 나타날 수 있어

CSS의 적절한 스타일과 레이아웃을 조절하는 방법을 통해 사용자가 정보를  훨씬 습득하기

편리한 형태로 변경할 수 있다. Display 속성을 변경하거나, 포지셔닝을 변경하는 등 레이아웃 변경을

통해 시각적 문서의 흐름을 바꾸는 방법은 여러가지가 존재한다.

그중 flex는 문서 내 요소들을 행, 열 단위로 정렬하기 위한 1차원 레이아웃이다.

flex layout을 적용하기 위한 방법은 부모의 요소에 Display: flex를 지정해주기만 한다면 이용할 수 있다.

 

flex layout에는 flex container와 flex item 두 가지 개념이 존재한다.

flex container는 flex 아이템들의 배치나 정렬 등을 담당하는 역할을 하며 속성 값들을 활용해

행 또는 열방향으로 배치하거나 아이템들을 수평, 수직 정렬 등을 할 수 있다.

flex item은 flex container의 자식 요소에 해당하며 자기가 차지하는 크기 및 자신들 사이의

순서를 변경할 수 있다.

 

flex에 대해 알고있어야 하는 두 가지 축이 존재한다.

main axis(메인 축)는 flex item들의 주요 배치 방법과 정렬 등의 기준점이 되는 축이며 flex와 관련된

대부분의 속성은 메인 축 기반으로 동작한다.

cross axis는 flex item들의 부차적인 정렬에 대한 기준을 담당한다.

 

정리하자면 flex item을 담는 상자인 flex container, flex container 내부에 위치한 flex item,

flex item들을 배치, 정렬하는데 핵심 기준이 되는 메인 축, 그리고 이를 보조하는 cross 축이 존재한다.

 

flex container에 적용하는 속성

flex-direction : 메인 축의 방향을 결정하는 속성으로 4가지 값 존재 (row, column, row-reverse, column-reverse)

 

flex item들이 컨테이너의 영역을 넘었을 때(overflow), 아이템들을 어떻게 배치할 것인가 결정하는 속성

flex-wrap : 기본 속성은 nowrap으로 flex-item들이 부모의 너비를 overflow 하더라도 1개의 라인만 유지한다.

                  만약 wrap 속성을 부여한다면 flex-item이 새로운 줄에 배치된다.

 

justify-content : main-axis를 기준으로 item들을 정렬

align-items : cross-axis를 기준으로 item들을 정렬

 

flex item에 적용하는 속성

order : 메인 축을 기준으로 item의 시각적 순서를 변경하는 속성으로 정수 값을 가지며 모든 item의 기본값은 0이고

            0보다 작은 값을 부여하면 시각적 순서상 앞에 위치하고 큰 값을 부여하면 뒤에 위치하게 된다.

 

flex-grow, flex-shrink, flex-basis, flex : item의 크기를 조절할 수 있는 속성

flex-basis : item의 기본 크기를 지정하는 속성, 기본 값은 auto로 item이 차지하고 있는 컨텐츠 크기만큼 설정

flex-grow : item이 늘어날 비율을 결정하는 속성, 컨테이너의 빈 영역을 grow 비율에 맞춰 분배, 기본 값은 0으로

                 컨테이너에 빈 공간이 존재해도 영역을 채우지 않으며 특정 숫자를 부여하면 적절하게 공간을 채울 수 있음

flex-shrink : grow와 반대로 item이 줄어드는 비율을 결정하는 속성, 컨테이너 영역을 overflow 했을 때 적용

                   0의 값을 주면 item의 크기가 부모의 크기를 넘어가도 줄어들지 않음

                   숫자 값을 부여하면 이에 비례하여 item의 크기가 줄어들게 됨

flex : 위의 세 속성의 축약형 속성으로 세 값을 나열하는 방식으로 사용 가능

         ex) flex: 1 1 auto, flex: 2 0 100px

 

기타 속성

gap(여백) : item 사이의 간격을 설정할 때 유용하게 사용할 수 있는 속성으로 flex가 아닌 grid에서 파생

 

flex는 1차원 레이아웃이기 때문에 간단한 레이아웃에 좋으며, 복잡한 레이아웃은 grid를 사용하는 것이 적합하다.

또한 flex는 배치, 정렬, 크기 변경, 순서 변경 등과 같이 특징을 활용하기 좋은 곳에 사용하는 것이 좋다.

 

 

 

 

출처)

https://www.youtube.com/watch?v=JQ0jO3B43YQ