Post

CSS Flexbox 살펴보기

CSS flexbox는 웹 레이아웃 디자인을 더욱 유연하고 효율적으로 만들어줍니다. 이 글에서는 flexbox의 개념 및 사용법에 대해 설명합니다.

Posted
CSS Flexbox 살펴보기
CSS Flexbox 살펴보기
By bluemiv
views 7 min read

1. Flexbox란 무엇인가?

flexbox(Flexible Box Layout)는 CSS3에서 도입된 레이아웃 모듈로, 컨테이너 내부의 아이템들을 자유롭게 정렬하고 배치할 수 있게 해줍니다. 기존의 float이나 inline-block 등으로는 어렵던 다양한 레이아웃을 flex 속성으로 쉽게 구현할 수 있습니다.

1.1. 주요 개념

  • Flex Container: display: flex를 적용한 요소로, flex 컨테이너 안에 있는 모든 아이템들은 flex 아이템이 됩니다.
  • Flex Item: flex 컨테이너 내부의 직접 자식 요소들입니다.
1
2
3
4
5

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

1
2
3
4
5
6
7
8

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

.flex-item {
  flex: 1;
}

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

2. Flexbox의 주요 속성

2.1 Flex Container 속성

  • display: flex 또는 inline-flex로 설정합니다.
  • flex-direction: 아이템의 주 축(main axis) 방향을 설정합니다.
    • row: 가로 방향 (기본값)
    • column: 세로 방향
  • justify-content: 주 축을 따라 아이템들을 정렬합니다.
    • flex-start: 시작점에 정렬
    • flex-end: 끝점에 정렬
    • center: 중앙에 정렬
    • space-between: 아이템 사이에 동일한 간격을 둡니다.
    • space-around: 아이템 주위에 동일한 간격을 둡니다.
  • align-items: 교차 축(cross axis)을 따라 아이템들을 정렬합니다.
    • flex-start: 시작점에 정렬
    • flex-end: 끝점에 정렬
    • center: 중앙에 정렬
    • baseline: 텍스트 기준선에 정렬
    • stretch: 아이템들을 컨테이너 높이에 맞춰 늘립니다.

2.2 Flex Item 속성

  • order: 아이템의 순서를 설정합니다. 기본값은 0이며, 숫자가 낮을수록 먼저 배치됩니다.
  • flex-grow: 남은 공간을 아이템들이 어떻게 차지할지를 설정합니다. 기본값은 0입니다.
  • flex-shrink: 아이템들이 축소될 때의 비율을 설정합니다. 기본값은 1입니다.
  • flex-basis: 아이템의 기본 크기를 설정합니다. 기본값은 auto입니다.
  • align-self: 개별 아이템을 컨테이너와 다른 정렬로 설정합니다.

3. Flexbox 예제 코드

3.1. flex-direction

flex-direction 속성은 flex 컨테이너 내의 아이템들이 배치되는 주 축(main axis)의 방향을 설정합니다. 기본값은 row입니다.

3.1.1. row

1
2
3
4
5

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

1
2
3
4
5
6
7
8
9
10

.flex-container {
  display: flex;
  flex-direction: row; /* 기본값 */
  border: 1px solid #ddd;
}
.flex-item {
  background-color: #91a7ff;
  padding: 10px;
  margin: 5px;
}

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

3.1.2. column

1
2
3
4
5

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

1
2
3
4
5
6
7
8
9
10
11

.flex-container {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  height: 200px;
}
.flex-item {
  background-color: #91a7ff;
  padding: 10px;
  margin: 5px;
}

See the Pen CSS Flexbox 살펴보기3 by taehong.kim (@taehongdev) on CodePen.

3.2. justify-content

justify-content 속성은 주 축(main axis)을 따라 아이템들을 정렬하는 방법을 설정합니다. 주 축은 flex-direction에 따라 달라집니다.

3.2.1. flex-start

1
2
3
4
5

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

1
2
3
4
5
6
7
8
9
10

.flex-container {
  display: flex;
  justify-content: flex-start; /* 기본값 */
  border: 1px solid #ddd;
}
.flex-item {
  background-color: #91a7ff;
  padding: 10px;
  margin: 5px;
}

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

3.2.2. center

1
2
3
4
5

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

1
2
3
4
5
6
7
8
9
10

.flex-container {
  display: flex;
  justify-content: center;
  border: 1px solid #ddd;
}
.flex-item {
  background-color: #91a7ff;
  padding: 10px;
  margin: 5px;
}

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

3.2.3. space-between

1
2
3
4
5

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

1
2
3
4
5
6
7
8
9
10

.flex-container {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ddd;
}
.flex-item {
  background-color: #91a7ff;
  padding: 10px;
  margin: 5px;
}

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

3.2.4. space-evenly

1
2
3
4
5

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

1
2
3
4
5
6
7
8
9
10

.flex-container {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #ddd;
}
.flex-item {
  background-color: #91a7ff;
  padding: 10px;
  margin: 5px;
}

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

3.2.5. space-around

1
2
3
4
5

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

1
2
3
4
5
6
7
8
9
10

.flex-container {
  display: flex;
  justify-content: space-around;
  border: 1px solid #ddd;
}
.flex-item {
  background-color: #91a7ff;
  padding: 10px;
  margin: 5px;
}

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

3.3. align-items

align-items 속성은 교차 축(cross axis)을 따라 아이템들을 정렬하는 방법을 설정합니다. 교차 축은 주 축에 수직인 방향입니다.

3.3.1. flex-start

1
2
3
4
5

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

1
2
3
4
5
6
7
8
9
10
11

.flex-container {
  display: flex;
  align-items: flex-start;
  border: 1px solid #ddd;
  height: 200px;
}
.flex-item {
  background-color: #91a7ff;
  padding: 10px;
  margin: 5px;
}

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

3.3.2. center

1
2
3
4
5

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

1
2
3
4
5
6
7
8
9
10
11

.flex-container {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  height: 200px;
}
.flex-item {
  background-color: #91a7ff;
  padding: 10px;
  margin: 5px;
}

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

3.3.3. flex-end

1
2
3
4
5

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

1
2
3
4
5
6
7
8
9
10
11

.flex-container {
  display: flex;
  align-items: flex-end;
  border: 1px solid #ddd;
  height: 200px;
}
.flex-item {
  background-color: #91a7ff;
  padding: 10px;
  margin: 5px;
}

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

3.3.4. stretch

1
2
3
4
5

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

1
2
3
4
5
6
7
8
9
10
11

.flex-container {
  display: flex;
  align-items: stretch;
  border: 1px solid #ddd;
  height: 200px;
}
.flex-item {
  background-color: #91a7ff;
  padding: 10px;
  margin: 5px;
}

See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.

WEB, CSS
css web flex layout 레이아웃 flexbox flexible box layout flex-start flex-end space-between
This post is licensed under CC BY 4.0 by the author.