[CSS] display : flex에 대하여(Flexible Box) - 플렉스 박스 레이아웃

반응형 웹을 구현하는 가장 대중적인 방법은 flex box를 활용한 플렉스 박스 레이아웃으로 화면을 구성하는 것입니다. 

 

 플렉스 박스 레이아웃이란? 

플렉스 박스(Flexbox) 레이아웃은 CSS의 display 속성 중 하나인 display: flex를 사용하여 요소들을 가로 또는 세로축을 따라 정렬하고 유연하게 배치하는 레이아웃 모델입니다. 이 플렉스 박스를 사용하면 여유 공간에 따라 너비나 높이, 위치 등을 자유롭게 변형할 수 있고 손쉽게 화면을 분할하여 필요한 HTML요소들을 배치할 수 있기 때문에 웹 페이지의 레이아웃을 쉽게 조정하고 정렬할 수 있습니다.

 

플렉스 박스의 구성요소

Flex Box Layout

• flex container : 웹 문서에 텍스트나 이미지, 표 등 웹 요소들을 플렉스 하게 사용하려면 플렉스 컨테이너로 묶어줘야 합니다. 
• flex item : 플렉스 컨테이너에 담기는 웹 요소입니다.
• main axis : 주축(main axis)이라고도 하며 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향을 말합니다. 기본적으로 주축은 왼쪽에서 오른쪽으로 수평 방향으로 배치합니다.
• main start : 주축(main axis)에서 플렉스 항목이 배치되기 시작하는 지점을 주축 시작점(main start)이라고 합니다.
• main end : 주축(main axis)에서 플렉스 항목의 배치가 끝나는 지점을 주축 끝점(main end)이라고 합니다.
• cross axis : 교차축(cross axis)은 주축(main axis)과 교차되는 방향입니다. 기본적으로 위에서 아래로 배치합니다. 
• cross start : 교차축에서 배치가 시작되는 지점을 교차축 시작점(cross start)라고 합니다.
• cross end : 교차축에서 배치가 끝나는 지점을 교차축 끝점(corss end)이라고 합니다.

 

플렉스 박스 레이아웃의 특징

• 유연한 크기 조정 : 플렉스 컨테이너 내의 요소들은 자동으로 크기를 조절하여 사용 가능한 공간을 최대한 활용합니다. 요소들은 컨테이너의 너비나 높이에 맞춰 유연하게 확장하거나 축소될 수 있습니다.
• 배치와 정렬 : 플렉스 박스는 주축(main axis)과 교차축(cross axis)을 가지고 있습니다. 주축은 기본적으로 가로 방향(row)이지만, flex-direction 속성을 사용하여 세로 방향(column)으로 변경할 수도 있습니다. 이를 통해 요소들을 가로나 세로 방향으로 정렬할 수 있습니다. 또한, justify-content와 align-items 속성을 사용하여 요소들의 정렬 방식을 조정할 수 있습니다.
• 순서 변경 : 플렉스 박스는 order 속성을 사용하여 요소들의 순서를 변경할 수 있습니다. 기본적으로는 HTML의 구조에 따라 순서가 결정되지만, order 속성을 사용하면 요소의 순서를 재정의할 수 있습니다.
• 유연한 정렬과 공간 분배 : 플렉스 컨테이너 내의 요소들은 flex-grow, flex-shrink, flex-basis 등의 속성을 사용하여 유연하게 정렬하고 공간을 분배할 수 있습니다. 이를 통해 각 요소의 크기 비율을 조절하거나 필요에 따라 크기를 자동으로 조정할 수 있습니다.

 

 플렉스 박스 사용법 

display:flex : 플렉스 컨테이너 지정하기

See the Pen display : flex by wjdxo513 (@wjdxo513) on CodePen.

 

• flex : 플렉스 박스를 박스 레벨 요소로 정의합니다.
• inline-flex : 플렉스 박스를 인라인 레벨 요소로 정의합니다.

플렉스 박스 레이아웃을 사용하기 위해서는 플렉스 박스 안에 배치하려는 웹 요소들을 감싸는 부모 요소를 만들고 그 부모 요소를 플렉스 컨테이너로 만들어야 합니다. display: flex;라고 명시해 주면 플렉스 컨테이너로 만들 수 있습니다. 위의 예제처럼 만들어주면 container class가 플렉스 컨테이너가 되고 그 안에 3개의 플렉스 항목이 생성됩니다.

 

 

flex-direction : 플렉스 방향 지정하기 

See the Pen flexbox1 by wjdxo513 (@wjdxo513) on CodePen.

 

• row : 주축을 가로로 교차축을 세로로 지정합니다. 플렉스 항목은 왼쪽에서 오른쪽으로 배치됩니다. (기본 값)
• row-inverse : 주축을 가로로 교차축을 세로로 배치됩니다. 플렉스 항목은 오른쪽에서 왼쪽으로 배치됩니다.
• column : 주축을 세로로 교차축을 가로로 배치됩니다. 플렉스 항목은 위에서 아래로 배치됩니다.
• column-inverse : 주축을 세로로 교차축을 가로로 지정합니다. 플렉스 항목은 아래에서 위쪽으로 배치됩니다.

flex-direction 속성을 사용하면 플렉스 항목의 주축을 가로(row)로 할지 세로(column)로 할지 지정할 수 있습니다. 설정하지 않으면 기본값인 row로 설정됩니다.

 

 

flex-wrap : 플렉스 항목을 한 줄 또는 여러 줄로 배치하기

See the Pen flexbox2 by wjdxo513 (@wjdxo513) on CodePen.

 

• no-wrap : 플렉스 항목들을 한 줄에 표시합니다. (기본 값)
• wrap : 플렉스 항목을 여러 줄에 표시합니다.
• wrap-reverse : 플렉스 항목을 여러 줄에 표시하면서 기존 방향과 반대로 배치합니다.

플렉스 항목들은 일반적으로 한 줄로 배치되지만 flex-wrap 속성을 사용하면 여러 줄로 배치할 수 있습니다.

 

 

flex-flow : 플렉스 방향과 여러 줄의 배치 한꺼번에 지정

See the Pen flexbox3 by wjdxo513 (@wjdxo513) on CodePen.

 

• flex-flow : [플렉스 방향] [플렉스 배치]

위에서 확인했던 flex-direction 속성과 flex-wrap 속성을 동시에 설정하고 싶으시면 flex-flow를 사용하시면 됩니다.

 

 

order : 플렉스 항목의 배치 순서 바꾸기

See the Pen flexbox4 by wjdxo513 (@wjdxo513) on CodePen.

 

• order : 정렬 숫자

플렉스 항목에 order 순서를 넣으면 플렉스 항목들이 순서대로 배치됩니다. 위의 예제에서는 4번째인 초록색 box가 order : 1로 지정되어 첫 번째로 배치되었네요. 추가로 order:0으로 설정하시거나 order:none으로 설정하시면 정렬이 적용되지 않게 할 수도 있습니다.

 

 

flex : 플렉스 항목 크기 조절하기

See the Pen flexbox5 by wjdxo513 (@wjdxo513) on CodePen.

 

• flex : 플렉스 항목의 너비를 지정합니다.
• flex-grow : 플렉스 항목의 너비를 얼마나 늘릴지 지정합니다.
• flex-shrink : 플렉스 항목의 너비를 얼마나 줄일지 지정합니다.
• flex-basis : 플렉스 항목의 기본 크기를 지정합니다.
• inital : 플렉스 항목이 본래의 크기를 가지되 플렉스 컨테이너의 공간이 부족할 경우 최소 크기까지 줄입니다.
• auto : 플렉스 항목이 본래 크기를 가지되 플렉스 컨테이너의 공간이 부족할 경우 플렉스 컨테이너의 공간을 늘리거나 줄입니다.

flex 속성을 사용하면 flex:[flex-grow] : [flex-shrink] : [flex-basis] 형태로 플렉스 항목의 너비를 늘리거나 줄일 수 있도록 세 가지 값을 이용하여 표시합니다.

 

 

 플렉스 항목의 배치를 위한 속성들 

flex 컨테이너에서 자식 요소들의 정렬은 justify-content와 align-items 속성을 사용하여 제어할 수 있습니다.

 

justify-content : 주축 기준의 배치 방법 지정하기

See the Pen flexbox6 by wjdxo513 (@wjdxo513) on CodePen.

 

• flex-start : 주축의 시작점을 기준으로 배치합니다.
• flex-end : 주축의 끝점을 기준으로 배치합니다.
• center : 주축의 중앙을 기준으로 배치합니다.
• space-between : 첫 번째 플렉스 항목과 마지막 플렉스 항목은 끝에 나머지 항목들을 같은 간격으로 배치합니다.
• space-around : 모든 플렉스 항목들을 같은 간격으로 배치합니다.

justify-content는 주축을 따라 요소들을 정렬하는 방법을 결정합니다.

 

 

align-items : 교차축 기준의 배치 방법 지정하기

See the Pen flexbox7 by wjdxo513 (@wjdxo513) on CodePen.

 

• stretch : 플렉스 항목을 확장해 교차축을 꽉 채웁니다. (기본 값)
• flex-start : 교차축의 시작점을 기준으로 배치합니다.
• flex-end : 교차축의 끝점을 기준으로 배치합니다.
• center : 교차축의 중앙을 기준으로 배치합니다.
• baseline : 시작점과 글자선이 가장 먼 플렉스 항목을 시작점에 배치하고 나머지 항목들을 맞추어 배치합니다.

align-items는 교차축을 따라 요소들을 정렬하는 방법을 결정합니다.