플렉스박스(Flexbox)란 무엇인가?
CSS3는 유연한 박스(Flexible Box)라는 레이아웃 모드를 제공하며, 일반적으로 플렉스박스(Flexbox)라고 부릅니다. 플렉스박스를 활용하면 복잡한 애플리케이션이나 웹 페이지의 레이아웃도 간단하고 직관적으로 구성할 수 있습니다.
플렉스 레이아웃은 크게 컨테이너(container)와 그 안에 배치되는 플렉스 아이템(flex items)으로 구성됩니다. 컨테이너에 적용할 수 있는 주요 속성은 다음과 같습니다.
flex-direction — 플렉스 아이템이 배치되는 주축(main axis)의 방향을 지정합니다. (예: row, column)
flex-wrap — 아이템이 컨테이너 너비를 초과할 경우 줄바꿈 여부를 결정합니다.
flex-flow — flex-direction과 flex-wrap을 한 번에 설정하는 축약(shorthand) 속성입니다.
justify-content — 주축 방향에서 아이템들을 정렬하는 방식을 지정합니다.
align-items — 교차축(cross axis) 방향에서 아이템들의 정렬 방식을 지정합니다.
align-content — 여러 줄로 나뉜 아이템 그룹 전체의 정렬 방식을 지정합니다.
플렉스 레이아웃 예제 코드
다음은 CSS3의 플렉스 레이아웃 모델을 실제로 구현한 전체 예제입니다. 세 개의 컨테이너가 서로 다른 정렬 방식과 배치 방향을 사용하는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.container1 {
align-self: flex-start;
display: flex;
background-color: rgb(71, 30, 255);
width: 200px;
margin: 20px;
}
.container1 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 10px;
font-size: 30px;
}
.container2 {
display: flex;
background-color: rgb(14, 126, 79);
width: 200px;
justify-content: center;
align-self: flex-start;
margin: 20px;
}
.container2 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 10px;
font-size: 30px;
}
.container3 {
display: flex;
flex-direction: column;
background-color: rgb(168, 60, 10);
width: 200px;
align-items: center;
margin: 20px;
}
.container3 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 10px;
width: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flex layout example</h1>
<div class="container">
<div class="container1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container3">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 외부 컨테이너의 space-evenly 정렬 덕분에 세 개의 플렉스 컨테이너가 화면에 균등한 간격으로 배치됩니다. 첫 번째 컨테이너(보라색)는 기본 가로(row) 방향으로, 두 번째 컨테이너(초록색)는 justify-content: center를 통해 중앙 정렬로, 세 번째 컨테이너(주황색)는 flex-direction: column을 적용해 세로 방향으로 아이템이 배열되는 것을 확인할 수 있습니다.
