본문 바로가기
프로그래밍/CSS

CSS flexbox 개념 정리

by 꾸션 2023. 2. 27.

CSS의 flexbox는 웹 페이지의 레이아웃을 관리하는 데 매우 유용한 기능입니다. 이 글에서는 flexbox의 기본 개념과 기능에 대해 설명하겠습니다.

 

Flexbox란?

Flexbox는 CSS의 레이아웃 모듈 중 하나로, 요소의 크기와 위치를 조정하는 데 사용됩니다. Flexbox를 사용하면 요소를 수평 또는 수직으로 정렬하고 간격을 조절하는 등의 작업이 가능해집니다.

Flexbox는 부모 요소인 flex container와 그 안에 들어가는 자식 요소인 flex item으로 구성됩니다. flex container는 display 속성을 이용하여 선언하며, flex item은 flex container 안에 있는 요소입니다.

 

Flex Container의 속성

Flex container는 다음과 같은 속성을 가지고 있습니다.

 

display

display 속성을 이용하여 flex container를 선언할 수 있습니다.

.container {
  display: flex;
}
 

flex-direction

flex-direction 속성을 이용하여 flex item의 방향을 결정할 수 있습니다. 기본 값은 row이며, 수평 방향으로 정렬됩니다. 다른 값으로는 column, row-reverse, column-reverse가 있습니다.

.container {
  display: flex;
  flex-direction: column;
}

row
row
row-reverse
row-reverse
column
column
column-reverse
column-reverse

justify-content

justify-content 속성을 이용하여 flex item을 수평 방향으로 정렬할 수 있습니다. 기본 값은 flex-start이며, 다른 값으로는 flex-end, center, space-around, space-between, space-evenly가 있습니다.

  • space-around: 아이템 좌우 공간이 동일
  • space-between: 아이템 간의 공간 동일
  • space-evenly: 첫 번째와 마지막 아이템을 공간의 처음과 끝에 배치 후, 아이템과 공간 동일
.container {
  display: flex;
  justify-content: center;
}
justify-content의 start, center, end 위치
justify-content의 start, center, end 위치
flex-start
flex-start

flex-end
flex-end
center
center
space-around
space-around
space-between
space-between
space-evenly
space-evenly

 

align-items

align-items 속성을 이용하여 flex item을 수직 방향으로 정렬할 수 있습니다. 기본 값은 stretch이며, 다른 값으로는 flex-start, flex-end, center, baseline이 있습니다.

.container {
  display: flex;
  align-items: center;
}
align-items의 start, center, end 위치
align-items의 start, center, end 위치

flex-wrap

flex-wrap 속성을 이용하여 flex item이 한 줄에 다 들어가지 않을 경우 줄 바꿈을 할지 여부를 결정할 수 있습니다. 기본 값은 nowrap이며, 다른 값으로는 wrap, wrap-reverse가 있습니다.

.container {
  display: flex;
  flex-wrap: wrap;
}
nowrap
nowrap

wrap
wrap
wrap-reverse
wrap-reverse

align-content

align-content 속성을 이용하여 flex item이 여러 줄에 걸쳐 있을 때 각 줄 사이의 간격을 조정할 수 있습니다. 이 속성은 flex-wrap: wrap이 설정되어 있을 때만 사용할 수 있습니다.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
 

Flex Item의 속성

Flex item은 다음과 같은 속성을 가지고 있습니다.

 

order

order 속성을 이용하여 flex item의 순서를 변경할 수 있습니다. 기본 값은 0이며, 숫자가 작을수록 앞에 위치합니다.

.item {
  order: 1;
}
 

flex-grow

flex-grow 속성을 이용하여 flex item이 flex container 안에서 얼마나 공간을 차지할지 결정할 수 있습니다. 기본 값은 0이며, 다른 값으로는 양수가 있습니다.

.item {
  flex-grow: 1;
}
 

flex-shrink

flex-shrink 속성을 이용하여 flex item이 flex container 안에서 얼마나 작아질 수 있는지 결정할 수 있습니다. 기본 값은 1이며, 다른 값으로는 양수가 있습니다.

.item {
  flex-shrink: 0;
}
 

flex-basis

flex-basis 속성을 이용하여 flex item의 기본 크기를 설정할 수 있습니다. 기본 값은 auto이며, 다른 값으로는 길이 단위가 있습니다.

.item {
  flex-basis: 100px;
}
 

flex

flex 속성을 이용하여 flex-grow, flex-shrink, flex-basis를 한 번에 설정할 수 있습니다. 기본 값은 0 1 auto이며, 순서대로 flex-grow, flex-shrink, flex-basis를 의미합니다.

.item {
  flex: 1 0 100px;
}
 

예제

아래는 flexbox를 사용하여 만든 예제입니다.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  flex: 1 0 100px;
  text-align: center;
  background-color: #ccc;
  margin: 10px;
}

아래는 실제 구현한 모습입니다.

1
2
3

 

위의 예제에서는 flex container인 .container를 가운데 정렬하고, flex item인 .item을 1줄에 3개씩 정렬합니다. 각 flex item은 flex: 1 0 100px로 설정되어 있으며, text-align 속성으로 가운데 정렬되고 background-color 속성으로 색상이 적용됩니다.

이상으로 flexbox에 대한 기본 개념과 속성, 예제에 대해 알아보았습니다. Flexbox를 이용하면 웹 페이지의 레이아웃을 간편하게 구성할 수 있으므로, 웹 개발을 하는 데 있어서 매우 유용한 기능입니다.

 

 

flexbox 개념 이해에 도움이 되는 동영상 링크

반응형

댓글