문의하기
CSS Flexbox 입문: 웹 레이아웃의 기본 개념, 속성 및 사용 예제
웹 레이아웃을 구성하는 것은 웹 디자인과 개발의 핵심 과정 중 하나입니다. CSS3에서 소개된 플렉스 박스(Flexbox)는 웹 페이지의 요소를 쉽게 배치하고 정렬할 수 있게 해주는 강력한 도구입니다. 이 글에서는 플렉스 박스의 기본 개념과 주요 속성 그리고 간단한 예제를 통해 웹 레이아웃을 손쉽게 구성하는 방법에 대해서 알아보겠습니다.
1. 플렉스 박스(Flexbox) 기본 개념
플렉스 박스는 부모 요소와 자식 요소 간의 유연한 배치와 정렬을 가능하게 합니다. 플렉스 컨테이너(Flex Container)는 플렉스 아이템(Flex Items)을 감싸는 부모 요소이고 플렉스 아이템은 플렉스 컨테이너의 자식 요소입니다.
1.1. 플렉스 컨테이너 설정하기
플렉스 컨테이너로 설정하려면 부모 요소에 “display: flex;” 또는 “display: inline-flex;” 속성을 적용합니다.
.container {
display: flex; /* inline-flex */
}1.2 . 주축(Main Axis) 및 교차축(Cross Axis)
플렉스 박스에서는 주축(Main Axis)과 교차축(Cross Axis)이 중요한 개념입니다. 주축은 플렉스 아이템이 배치되는 기본 축이고 교차축은 주축에 수직인 축입니다. 기본적으로 주축은 수평으로 설정되어 있습니다.
2. 주요 플렉스 속성
플렉스 박스에서는 다양한 속성을 사용하여 요소의 배치와 정렬을 조절할 수 있습니다.
2.1. 플렉스 컨테이너 속성
▼ 플렉스 컨테이너 속성
| 속성 | 설명 |
|---|---|
| display | 플렉스 컨테이너를 생성하기 위해 ‘display: flex;’ 또는 ‘display: inline-flex;’를 사용합니다. |
| flex-direction | 주 축의 방향을 설정합니다. row(기본값), row-reverse, column, column-reverse 중 선택할 수 있습니다. |
| flex-wrap | 플렉스 아이템이 한 줄에 배치되는지 여러 줄로 나눠지는지 설정합니다. nowrap(기본값), wrap, wrap-reverse 중 선택할 수 있습니다. |
| flex-flow | flex-direction과 flex-wrap의 축약 속성입니다. 두 속성 값을 한 번에 설정할 수 있습니다. |
| justify-content | 주 축에 따라 플렉스 아이템의 정렬 방식을 설정합니다. flex-start(기본값), flex-end, center, space-between, space-around, space-evenly 중 선택할 수 있습니다. |
| align-items | 교차 축에 따라 플렉스 아이템의 정렬 방식을 설정합니다. stretch(기본값), flex-start, flex-end, center, baseline 중 선택할 수 있습니다. |
| align-content | 교차 축에 따라 여러 줄의 플렉스 아이템 간의 정렬 방식을 설정합니다. flex-start, flex-end, center, space-between, space-around, stretch(기본값) 중 선택할 수 있습니다. |
2.2. 플렉스 아이템 속성
▼ 플렉스 아이템 속성
| 속성 | 설명 |
|---|---|
| order | 플렉스 아이템의 순서를 설정합니다. 정수 값으로 설정하며, 기본값은 0입니다. 작은 값이 먼저 배치됩니다. |
| flex-grow | 플렉스 아이템의 확장 비율을 설정합니다. 숫자 값으로 설정하며, 기본값은 0입니다. 컨테이너에 남아있는 공간에 대한 배분 비율을 결정합니다. |
| flex-shrink | 플렉스 아이템의 축소 비율을 설정합니다. 숫자 값으로 설정하며, 기본값은 1입니다. 컨테이너에 공간이 부족할 때의 축소 비율을 결정합니다. |
| flex-basis | 플렉스 아이템의 기본 크기를 설정합니다. 길이 단위(px, em, % 등) 또는 ‘auto'(기본값)로 설정할 수 있습니다. |
| flex | flex-grow, flex-shrink, flex-basis의 축약 속성입니다. 두 속성 값을 한 번에 설정할 수 있습니다. |
| align-self | 특정 플렉스 아이템에만 적용하는 교차 축 정렬 속성입니다. 기본값은 ‘auto’로, 플렉스 컨테이너의 align-items 값에 따릅니다. ‘stretch’, ‘flex-start’, ‘flex-end’, ‘center’, ‘baseline’ 등을 선택할 수 있습니다. |
3. 사용 예제
플렉스 박스를 이용해 간단한 레이아웃을 구성하는 방법에 대해서 알아보겠습니다.
3.1. 예제 1
1. 예제 코드
<!DOCTYPE html>
<html>
<head>
<title>플렉스 박스 예제 1</title>
<style>
.container {
display: flex; /* 플렉스 박스 설정 */
justify-content: space-between; /* 주축에서 아이템 간격을 동일하게 설정 */
align-items: center; /* 교차 축에서 아이템을 중앙에 위치시킴 */
}
.item {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #f2f2f2;
text-align: center;
line-height: 100px; /* 아이템 내부의 텍스트를 수직 중앙에 위치시킴 */
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
☞ 플렉스 컨테이너의 justify-content와 align-items 속성을 사용하여 각 아이템의 위치를 조절하였고 아이템의 내부 텍스트는 line-height를 통해 수직 중앙에 위치시켰습니다.
2. 실행 결과 화면
3.2. 예제 2
1. 예제 코드
<!DOCTYPE html>
<html>
<head>
<title>플렉스 박스 예제 2</title>
<style>
.container {
display: flex;
flex-wrap: wrap; /* 플렉스 아이템이 줄바꿈되도록 설정 */
}
.item {
flex: 1; /* 플렉스 아이템이 부모 컨테이너 공간에 맞춰 자동 조절 */
min-width: 100px; /* 최소 너비 설정 */
height: 100px;
border: 1px solid black;
background-color: #f2f2f2;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
☞ 플렉스 컨테이너의 flex-wrap 속성을 사용하여 아이템이 줄바꿈되도록 하였고 플렉스 아이템에 flex 속성을 사용하여 부모 컨테이너 공간에 맞춰 자동으로 조절되게 설정하였습니다. 아이템의 최소 너비를 설정하여 아이템이 너무 작아지지 않도록 하였습니다.
2. 실행 결과 화면
3.3. 예제 3
1. 예제 코드
<!DOCTYPE html>
<html>
<head>
<title>플렉스 박스 예제 3</title>
<style>
.container {
display: flex;
justify-content: space-around; /* 아이템 사이에 동일한 여백을 설정하고 양쪽 여백도 포함 */
align-items: center; /* 교차 축에서 아이템을 중앙에 위치시킴 */
}
.item {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #f2f2f2;
text-align: center;
line-height: 100px;
}
.item:nth-child(2) {
align-self: flex-start; /* 두 번째 아이템을 교차 축의 시작점으로 설정 */
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
☞ 플렉스 컨테이너의 justify-content 속성을 사용하여 아이템 사이에 동일한 여백을 설정하고 양쪽 여백도 포함하였습니다. align-items 속성을 사용하여 교차 축에서 아이템을 중앙에 위치시켰습니다. 두 번째 아이템에 align-self 속성을 사용하여 교차 축의 시작점으로 설정하였습니다. 이를 통해 플렉스 아이템의 개별 정렬을 조절할 수 있습니다.
2. 실행 결과 화면
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!
