CSS 플렉스박스(Flexbox) 이해하기

Flexbox(플렉스박스)를 이용한 반응형 웹디자인이 대중화되면서 CSS에서 Flexbox의 존재감이 점점 커지고 있습니다. 이번 포스팅에서는 Flexbox를 이해하기 위해서 꼭 필요한 핵심 개념과 자주 사용되는 속성에 대해서 살펴보겠습니다.

Flexbox 구성 요소

Flexbox는 일반적으로 하나의 Flex container와 여러 개의 Flex item으로 구성됩니다. 따라서, Flexbox를 사용할 때 마크업과 스타일은 대략 다음과 같은 형태를 띠게 됩니다.

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.container {
  display: flex;
}

.item {
  flex: 1;
}

여러 개의 내부 엘리먼트를 담고 있는 외부 엘리먼트에 display: flex; 스타일을 적용하면, 외부 엘리먼트는 flex container가 되고, 내부 엘리먼트는 자동으로 flex item가 됩니다.

이것이 왜 중요하냐면, flex container와 flex item에는 서로 적용할 수 있는 CSS 속성이 다르기 때문입니다. 예를 들어, flex container에는 flex-direction, justify-content, align-items와 같은 속성을 적용할 수 있는 반면에, flex item에는 flex, align-self, order와 같은 속성을 적용할 수 있습니다.

Main/Cross Axis

Flexbox를 원하는대로 제어하려면 axis(축)의 개념에 대해서 정확히 이해하고 있어야 합니다. main axis와 cross axis에 따라 CSS 속성이 좌우로 적용될 수도 있고, 상하로 적용될 수도 있기 때문입니다. main axis는 여러 개의 flex item이 순서대로 배치되는 방향이며, cross axis는 main axis와 수직을 이루는 방향입니다.

기본적으로 main axis는 flex container의 flex-direction 속성에 의해서 결정되며 기본값은 row 입니다. 따라서 flex container 내의 flex item은 왼쪽부터 오른쪽 방향으로 배치되며, 이 방향이 main axis가 됩니다. 반면에 flex-direction 속성을 column으로 설정해주면 main axis는 위에서 아래로 내려오는 방향이 됩니다.

Flexbox를 사용할 때 많은 분들이 가장 햇갈려하는 부분이 바로 flex item을 어떻게 정렬하느냐는 것일 것입니다. flex item을 담고 있는 flex container에 justify-content 또는 align-items 속성을 정렬 방향을 고려하여 적용해야 하는데요. justify-content 속성은 main axis를 기준으로 정렬하며, align-items cross axis를 기준으로 정렬합니다.

justify-content

Flexbox를 사용할 때 자주 접하게 되는 속성인 justify-content 속성은 flex item을 main axis를 기준으로 어떻게 정렬할지를 결정합니다.

기본값은 flex-start인데, flex item을 main axis의 맨 앞으로 정렬해줍니다. 즉, flex-direction 속성이 row라면 좌측 정렬, flex-direction 속성이 column이라면 상단 정렬이 될 것입니다.

justify-content 속성값으로는 flex-end, center, space-between, space-evenly, space-around 등을 사용할 수 있습니다. space-로 시작하는 속성값을 잘 활용하면 상당히 유연한 레이아웃을 큰 노력없이 구성할 수 있습니다.

align-items

justify-content 속성과 더불어 Flexbox를 사용할 때 자주 접하게 되는 속성인 align-items 속성은 flex item을 cross axis를 기준으로 어떻게 정렬할지를 결정합니다.

기본값은 stretch인데, flex item을 flex container의 높이 또는 너비만큼 늘려줍니다. flex-direction 속성이 row라면 높이 만큼 늘어나고, flex-direction 속성이 column이라면 너비만큼 늘어날 것입니다. 한 가지 주의할 점은 flex-direction 속성이 row일 때는 상하로 공백이 생기도록 height 속성을 지정해주지 않으면 아무 효과가 나타나지 않을 수 있다는 것입니다.

align-items 속성값으로는 center, flex-start, flex-end, baseline 등을 사용할 수 있습니다.

flex

마지막으로 살펴볼 속성은 flex container가 아닌 flex item에 적용하는 flex 속성이며 main axis 기준으로 공간 배분을 위해서 사용됩니다.

flex 속성은 flex-grow와 flex-shrink, flex-basis 속성을 한 번에 적용할 수 있도록 해줍니다. flex-grow 속성은 해당 flex item이 main axis 상에 공백이 있을 때, 이 공백을 얼마나 점유할지를 지정합니다. flex-shrink 속성은 해당 flex item이 main axis 상에 공간이 부족할 때, 얼마나 공간을 양보할지를 지정합니다. flex-basis 속성은 해당 flex item이 main axis 상에 공백이 있을 때, 최소 얼만큼의 공간을 점유할지를 지정합니다.

예를 들어, flex item 중 하나에만 flex: 1; 스타일을 적용하면, 그 flex item이 모든 공백을 점유합니다. 하지만 모든 flex item에 flex: 1; 스타일을 적용하면, 공백을 균등하게 나누어서 점유합니다. 또한, flex 속성의 값을 서로 다르게 주면, 공백을 다른 비율로 점유하게 됩니다.

마치면서

이상으로 CSS Flexbox에 대한 기본 개념과 핵심 속성에 대해서 수박 겉햝기 수준으로 살펴보았습니다. Flexbox에는 이 밖에도 정말 많은 속성들이 있으며, 이 속성들을 조합해서 무궁무진한 방법으로 응용할 수 있습니다.

Flexbox의 응용 방법에 대해서는 추후 기회가 되면 다른 포스팅에서 다뤄보도록 하겠습니다. Flexbox에 대한 좀 더 심도있게 공부하고 싶은 분들께는 아래 자료를 추천 드립니다.

• A Complete Guide to Flexbox
• MDN Flexbox