2-1. 플렉스박스란?
Flexbox(플렉스박스)는 CSS에서 레이아웃을 쉽게 만들기 위한 1차원(가로 또는 세로 방향) 정렬 시스템입니다.
요소들을 일정한 간격으로 배치하거나, 정렬하거나, 유연하게 크기를 조절할 때 매우 유용합니다.
■ 왜 Flexbox를 사용할까요?
전통적인 CSS 레이아웃 방식(예: float, inline-block)은 복잡한 정렬이나 동적인 크기 조정에 어려움이 있었습니다.
Flexbox는 이러한 문제를 간단하게 해결해 줍니다.
Flexbox를 사용하려면 두 가지가 있습니다:
1. Flex Container
Flexbox의 부모 요소로, 자식 요소들을 플렉스 항목으로 만들어줍니다.
2. Flex Items
Flex Container의 자식 요소들이 정렬 대상입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 예제</title>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
border: 2px solid #333;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Flexbox 레이아웃 예제</h2>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
ex2-1.html의 실행 결과
.container에서의 Flexbox
display:flex
.container 요소에 display: flex;를 주면 Flex 컨테이너가 됩니다.
이 컨테이너의 직계 자식 요소들(= .box들)은 자동으로 Flex 아이템이 됩니다.
기본 정렬 방향은 가로 방향(행)입니다.
.box에서의 Flexbox (내부 정렬용)
display: flex
이 속성으로 .container는 Flex 컨테이너가 됩니다.
안에 있는 .box 요소들이 가로로 나열됩니다 (기본 방향: row).
justify-content: space-between
자식 요소들(박스들) 사이에 동일한 간격을 두고 배치합니다.
첫 박스는 왼쪽 끝, 마지막 박스는 오른쪽 끝에 붙습니다.
요약하면 .container는 박스들을 가로 방향으로 정렬하고, 각 .box는 자기 내부에서 텍스트를 가운데 정렬합니다.
Flexbox는 이런 가로 정렬, 정렬 간격, 가운데 정렬 등을 쉽게 처리할 수 있는 강력한 레이아웃 도구입니다.
