HTML&CSS - [CSS] Layout (요소배치) 완전 정복 2 - flex(Flexible Box Layout)

서론

지난 글에서 CSS를 통해 요소를 배치하는 방법은 여러 가지가 있다고 말했습니다.

그중 Display속성에서 요소 자체의 내부를 어떻게 보일 것인가를 결정하는 속성 값이 있다고 언급했었죠.

바로 flex와 grid인데요. 

 

오늘은 그중 flex(Flexible Box Layout) 기술에 대해서 알아보도록 하겠습니다.

이 글을 쓰는 시점에서 CSS의 대표적인 레이아웃 기술이면서, 손쉽게 사용할 수 있는 방법 중 하나입니다.

 

이전 글이 궁금하다면 아래 링크를 눌러주세요.

HTML&CSS - [CSS] Layout (요소배치) 완전 정복 1 - 개요

---

Flexible Box Layout Module? - 개념과 구조

가변 상자 레이 모듈 이하 flex(box)는 일차원 평면상에 특정 축을 기준으로 요소를 손쉽게 배치할 수 있게 만들어진 기술입니다. 이를 CSS 기술에서 Flexbox, Flex, 가변 상자 등 다양한 이름으로 부르고 있습니다.

 

사용하는 방법은 간단합니다. Display 속성과 flex속성 값을 사용하면 flex기술을 사용할 준비는 완료된 것입니다.

 

Display : flex

 

Display : flex는  요소 내부를 어떻게 보일 것인가를 결정하는 방법 중 하나라고 했습니다.

즉, Display : flex가 설정된 요소의 하위 요소들은 설정된 특정 축을 기준으로 요소를 배치할 수 있게 됩니다.

 

Flex의 개념을 간단하게 정리해보도록 합시다.

• 특정 축을 기준으로 요소를 배치할 수 있도록 만든 기술
• 특정 요소를 Display : flex로 정의하면 하위 요소들은 특정 요소에 정의된 축을 기준으로 요소가 배치된다.

위의 내용을 토대로 flex는 어떤 구조로 이루어져야 되는지 상상해 보도록 합시다.

• 레이아웃을 배치할 가장 최상단의 요소는 flex로 정의되어야 한다.
• flex로 정의된 상위 요소는 특정 방향의 축이 정의되어 있어야 한다.
• flex로 정의된 상위 요소 안의 하위 요소들을 축을 기준으로 위치를 지정할 수 있어야 한다.

이제 상상한 내용을 잘 생각해보면서 실제 flex가 어떻게 이루어져 있는지 확인해 보도록 합시다.

flex의 구성은 아래와 같이 이루어져 있습니다.

• FlexContainer(컨테이너)
  
  • flex로 정의된 요소를 말하며 하위 요소들을 배치하기 위한 공간이다.
• FlexItem(아이템)
  • Container안에 존재하는 자식 요소들을 말한다.
• Main axis(메인 축)
  • Main 축을 기준으로 아이템들이 차례대로 배치된다.
  • 메인 축을 기준으로 요소를 정렬할 수 있게 도와주는 축
  • 시작과 끝으로 방향을 지정할 수 있다.
• Cross axis(보조 축)
  • Main축의 수직방향으로 요소를 정렬할 수 있게 도와주는 축.
  • 시작과 끝으로 방향을 지정할 수 있다. 

CSS의 flex레이 아웃 기술이 어떻게 요소를 배치하는지 감이 좀 잡히고 있나요?

간단한 예제를 통해서 한번 flex를 먼저 사용해 보도록 합시다.

---

예제 1 - flex 기본 사용방법

예제를 진행하기 앞서, 다시 한번 위 내용을 상기시켜 보도록 합시다.

생각보다 많은 내용에 대한 정의가 필요합니다.

• Container 지정
• Main  axis 지정 (가로 또는 세로) / 방향 지정 (좌에서 우)등
• item들의 정렬 상태
• ... 등등

이런 내용들을 하나하나 정의하지 않아도 보편적인 방법으로 기본 정의가 되어있습니다.

그렇기 때문에 컨테이너의 위치만 정하면 손쉽게 flex레이 아웃 기법을 적용시킬 수 있습니다.

 

• Flex를 사용하지 않았을 때

See the Pen flex_example_1(before) by Gon (@gon-91) on CodePen.

 

 

 

 

여기서 앞에서 계속해서 말했던 display : flex를 레이아웃을 적용시킬 상위 요소에 적용해 보도록 하겠습니다.

• Flex를 사용했을 때

See the Pen flex_example_1(after) by Gon (@gon-91) on CodePen.

 

 

 

 

아주 손쉽게 수평방향 요소 배치가 이루어졌습니다. 단 한 줄의 소스코드를 통해서 말이죠!

---

Flex Container 구조 제어하기

예제 1처럼 display : flex만으로 간단하게 수평 요소 배치를 만들 수 있습니다.

단, 보편적인 레이아웃 형태의 속성 값이 들어있는 기본 값이기 때문에 자유도가 떨어지거나 사용자가 원하는 방식이 아닐 수 있습니다. 따라서 flex 레이아웃 배치기 술을 효과적으로 사용하려면 각각에 대한 속성과 값들을 익히고 제어할 수 있어야 합니다.

 

우선 flex container에 적용할 수 있는 속성들은 다음과 같습니다.

속성	내용
display	Container 구조
flex-direction	Main axis 기준
flex-wrap	Item의 줄 바꿈
flex-flow	direction + wrap 속성
justify-content	Main axis 기준 정렬
align-content	Cross-axis 기준 정렬 (줄 바꿈이 있는 경우)
align-items	Cross-axis 기준 정렬(줄 바꿈이 없는 경우)

---

Display 속성 - Container 구조 제어

Display속성을 이용해서 Container를 어떤 구조로 만들 것인가를 정의할 수 있습니다.

display : 속성 값	내용
diplay : flex	Container를 Block처럼 만든다.
display : inline-flex	Container를 Inline처럼 만든다.

CSS를 배웠다면 block과 inline에 대해서 알고 있을 것입니다. 위의 Display속성은 Container를 block 또는 Inline으로 설정해 주는 것입니다.

See the Pen flex_example_1(after) by Gon (@gon-91) on CodePen.

 

 

 

 

---

flex-direction 속성 - Main axis 기준 정의

flex layout기법은 main axis(메인 축)을 기준으로 요소들이 배치되는 방식입니다.

따라서 flex-direction 속성을 통해 메인 축의 위치와 방향을 정해줄 수 있습니다.

flex-direction : 속성 값	내용
flex-direction : row	가로 배치 (좌측 부터) - 기본 값
flex-direction : column	세로배치 (위 부터)
flex-direction : row-reverse	역 바로 배치 (우측 부터)
flex-direction : column-reverse	역 세로 배치 (아래 부터)

 

See the Pen flex_flex and inline by Gon (@gon-91) on CodePen.

 

 

 

 

---

flex-wrap속성 -줄 넘김에 대한 정의

flex layout에서는 기본적으로 메인 축을 기준으로 줄이 변경되지 않고 한 줄에서만 요소가 배치됩니다.

이런 경우 문제점이 생기거나 원하지 않는 문제가 발생할 수 있습니다.

See the Pen flex_wrap-error by Gon (@gon-91) on CodePen.

 

 

 

 

예제처럼 많은 요소들을 많이 배치한다면 원하지 않는 결과가 나올 수 있거나, 효율이 떨어지는 문제가 발생합니다. 

이때 flex-wrap속성을 통해 줄 넘김 처리를 할 수 있습니다.

flex-wrap : 속성 값	내용
flex-wrap : nowrap	줄 넘김을 허용하지 않음 (기본 값)
flex-wrap : wrap	줄 넘김을 허용 함
flex-wrap : wrap-reverse;	줄 넘김을 허용 하며 역 배치를 함

 

See the Pen flex_wrap-error by Gon (@gon-91) on CodePen.

 

 

 

 

예제처럼 뷰 포트가 변경되면서 아이템 요소의 지정된 크기를 넘어서는 경우 줄 넘김이 발생하게 됩니다.

---

flex-flow속성 - dirction + wrap

flex layout을 사용하다 보면 dirction과 wrap속성을 모두 정의할 필요가 존재합니다.

이때 flow속성을 이용해서 한 번에 dirction과 wrap속성을 정의할 수 있습니다.

flex-flow : 속성 값	내용
flex-flow : dirction속성 값 + wrap 속성 값	dirction 및 wrap 속성 값 정의

 

See the Pen flex_wrap-error by Gon (@gon-91) on CodePen.

 

 

 

 

---

Flex Container에서 Item 정렬하기

이제 우리는 flex layout기술을 적용하여 원하는 방향으로 아이템들을 배치할 수 있는 방법에 대해서 익혔습니다.

이제 생성된 Container에서 아이템들을 어떻게 정렬하여 배치할 수 있는지 알아보도록 합시다.

Container로 지정된 요소의 전체 하위 요소 즉 flex item들에 대한 정렬방법에 대한 정의를 할 수 있습니다.

 

속성	내용
display	Container 구조
flex-direction	Main axis 기준
flex-wrap	Item의 줄 바꿈
flex-flow	direction + wrap 속성
justify-content	Main axis 기준 정렬
align-content	Cross-axis 기준 정렬 (줄 바꿈이 있는 경우)
align-items	Cross-axis 기준 정렬(줄 바꿈이 없는 경우)

---

 

justify-content 속성 - Main axis 기준 정렬

이 속성은 메인 축을 기준으로 아이템들을 어떻게 정렬할 것인가를 정의할 수 있습니다.

justify-content : 속성 값	내용
flex-start	메인 축 시작점부터 정렬 (기본 값)
flex-end	메인 축 끝점부터 정렬
center	메인 축 가운데 정렬
space-between	시작과 끝을 제외한 균등 정렬
space-around	균등 정렬

 

See the Pen flex_flex-direction by Gon (@gon-91) on CodePen.

 

 

 

 

 

---

align-content  / - Croos axis 기준 정렬(여러 줄)

flex container의 메인 축이 좌표평면 상의 x 축이라고 가정했을 때 요소를 배치하기 위해서는 x축과 y축을 기준으로 어떻게 정의할 것인가가 필요합니다.

이 align-content속성은 메인 축과 교차축 즉 y축의 요소 정렬 상태를 정의하는 속성입니다.

즉, 요소들이 가로방향으로 배치된다면 세로 방향의 정렬을 하기 위한 속성입니다.

align-content는 줄 넘김이 있는 flex item이 여러 줄 이상인 경우 사용합니다.

align-content : 속성 값	내용
stretch	교차 축을 기준으로 채움 (기본 값)
flex-start	교차 축의 시작 점으로 정렬
flex-end	교차 축의 끝 점으로 정렬
center	교차 축의 가운데 점으로 정렬
space-between	시작과 끝을 제외한 균등 정렬
space-around	균등 정렬

See the Pen flex_align-content by Gon (@gon-91) on CodePen.

 

 

 

 

align-items 속성 - Croos axis 기준 정(한 줄)

align-items 속성은 align-content와 동일합니다. 

단, 한 줄의 경우에 적용이 권장되는 속성이며 여러 줄이고 align-content속성이 정의되어있다면 align-content속성이 우선 적용됩니다.

align-content : 속성 값	내용
stretch	교차 축을 기준으로 채움 (기본 값)
flex-start	교차 축의 시작 점으로 정렬
flex-end	교차 축의 끝 점으로 정렬
center	교차 축의 가운데 점으로 정렬
baseline	문자 기준선을 교차축 가운데 점으로 정렬

See the Pen flex_align-content by Gon (@gon-91) on CodePen.

 

 

 

 

---

반응형

---

Flex Item의 크기 제어하기

위 내용들에서 Container를 정의하고 item들을 어떻게 정렬하는지 알아봤습니다.

이제 각각의 아이템들이 어떻게 컨테이너 안에서 존재하는지 알 필요가 있습니다.

 

뷰포트(브라우저창)의 크기에 따라 우리가 정의한 컨테이너의 크기는 변경됩니다.

이때 아이템들이 컨테이너 박스 안에서 차지하는 공간에 대한 정의를 해주면 다양하게 변경되는 컨테이너에서도 원하는 layout을 유지할 수 있습니다.

속성	내용	기본값
flex-grow	item 너비 증가 비율	0
flex-shrink	item 너비 감소 비율	1
flex-basis	Item의 기본 너비	auto
flex	grow - shrink - basis의 혼합 속성	-

flex : grow - 아이템의 너비 증가 비율

이 속성을 통해 flex컨테이너의 비율이 증가하더라도, item을 컨테이너에 일정한 비율로 유지할 수 있게 됩니다.

See the Pen flex_item size by Gon (@gon-91) on CodePen.

 

 

 

 

flex : shrink - 아이템의 감소 너비 비율

이 속성을 통해 flex컨테이너의 비율이 감소하더라도, item을 컨테이너에 일정한 비율로 유지할 수 있게 됩니다.

단, 포함되는 item에 지정된 크기 값을 가지고 비율을 계산합니다.

 

See the Pen flex_grow by Gon (@gon-91) on CodePen.

 

 

 

 

flex : basis - 아이템의 기본 너비

아이템의 기본 너비를 정의하는 속성입니다.

단, 해당 속성이 기본값(auto)이 아니고 정해졌다면, item요소는 width, height 등으로 item의 크기를 제어할 수 없게 됩니다.

See the Pen flex_shrink by Gon (@gon-91) on CodePen.

 

 

 

 

flex : x x x - 혼합 속성

혼합 속성을 통해서 위의 3가지 속성을 한 번에 사용할 수 있습니다.

grow, shrink, basis순으로 설정할 수 있으며, shrink 및 basis는 생략이 가능합니다.

.item{
	flex: 1 1 200px; /*grow shrink basis*/ 
    flex: 1 2 /*grow shrink*/ 
    flex: 1 50px /*grow basis*/ 
}

Flex item의 단일 정렬하기 - align-sef

컨테이너에서 모든 item요소들에 정렬을 적용시키는 방법을 말씀드렸습니다.

하지만, 각각의 아이템들만 특수한 정렬을 하고 싶은 경우 또한 생기기 마련입니다.

flex레이 아웃 기법에는 당연히 이런 단일 요소 정렬에 대한 방법이 존재합니다.

flex 아이템에 적용하는 속성입니다.

align-self : 속성 값	내용
auto	컨테이너의 aling-item속성을 가지고 옴 (기본 값)
stretch	교차 축을 기준으로 채움 (기본 값)
flex-start	교차 축의 시작 점으로 정렬
flex-end	교차 축의 끝 점으로 정렬
center	교차 축의 가운데 점으로 정렬
baseline	문자 기준선을 교차축 가운데 점으로 정렬

 

See the Pen flex_basis by Gon (@gon-91) on CodePen.

 

 

 

Flex Item의 요소 배치 순서 변경하기 - order

마지막으로 아이템이 컨테이너에 배치하는 순서를 제어할 수 있습니다.

보통 HTML에 생성된 소스코드대로 요소가 배치되지만 해당 속성을 이용하면 요소 배치 순서를 변경할 수 있습니다.

요약정리

 

flex layout기술에 대해 어느 정도 이해가 되는데 도움이 됐으면 합니다. 

• Flex layout기술은 Container와 item을 어떻게 제어하는가가 핵심
• 컨테이너, 아이템, 메인 축, 보조축으로 구성되어 있다.
• 컨테이너 속성
  • Container속성 - display : xxx
  • 메인 축 방향 :  driction : xxx
  • 줄 바꿈 : flex-wrap : xxx
  • 혼합 속성 : flex-flow
  • 메인 축 기준 정렬 : justify-content
  • 보조 축 기준 정렬 : align-content, align-items
• 아이템 속성
  • 아이템의 증가 너비  : flex-grow
  • 아이템의 감소 너비  : flex-shrink
  • 아이템의 기본 너비  : flex-basis
  • 아이템 너비 혼합 속성 : flex
  • 아이템 개별 보조축 기준 정렬 : align-self
  • 아이템 컨테이너 배치 순서 : order