📌 Flexbox 기본 개념

HTML

📌 Flexbox 기본 개념

coco030030 2025. 3. 16. 23:46

📌 Flexbox 기본 개념

Flexbox는 "유연한 배치" 를 위한 레이아웃 모델이야.
쉽게 말해, "한 줄(가로) 또는 한 열(세로)로 원하는 대로 배치할 수 있는 기능" 이야.

🔹Flex 컨테이너 & 항목

Flex 컨테이너: display: flex; 를 설정하면, 그 안의 요소들이 Flex 항목이 돼.
Flex 항목: Flex 컨테이너 안의 직접적인 자식 요소들.

📌 Flex 컨테이너 속성

🔹 display: flex; → Flex 컨테이너를 만들어 줘.
🔹 flex-direction → 요소 배치 방향 결정

row (기본값) → 왼쪽 → 오른쪽
column → 위 → 아래
🔹 justify-content → 가로 정렬
center → 가운데 정렬
space-between → 요소 사이에 균등한 간격
space-around → 요소 주변에 균등한 간격
🔹 align-items → 세로 정렬 (한 줄일 때)
center → 가운데 정렬
flex-start → 위쪽 정렬
flex-end → 아래쪽 정렬
stretch (기본값) → 가득 차게 늘어남
🔹 align-content → 여러 줄일 때 세로 정렬 (중요한 경우는 나중에)

📌 Flex 항목 속성

🔹 flex-grow → 남은 공간을 얼마나 차지할지 (기본값 0)
🔹 flex-shrink → 공간이 부족할 때 얼마나 줄어들지 (기본값 1)
🔹 flex-basis → 기본 크기 (예: 100px, 20%)
🔹 align-self → 개별 항목의 세로 정렬 (auto, center, flex-start, flex-end)

✅ 예제 1: 기본 가로 정렬

<!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; /* Flex 컨테이너 설정 */
            justify-content: center; /* 가운데 정렬 */
            align-items: center; /* 세로 가운데 정렬 */
            height: 200px;
            border: 2px solid black;
        }
        .box {
            width: 50px;
            height: 50px;
            background-color: lightblue;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

✅ 결과: 세 개의 박스가 중앙에 가로 정렬됨.

✅ 예제 2: 왼쪽 정렬 + 간격 유지

.container {
    display: flex;
    justify-content: space-between; /* 왼쪽, 오른쪽에 붙이고 중간은 균등 간격 */
    align-items: center;
    height: 200px;
    border: 2px solid black;
}

✅ 결과: 박스들이 왼쪽과 오른쪽에 붙고, 가운데 간격이 균등하게 배치됨.

✅ 예제 3: 세로 정렬

.container {
    display: flex;
    flex-direction: column; /* 세로로 배치 */
    justify-content: center; /* 세로 중앙 정렬 */
    align-items: center; /* 가로 중앙 정렬 */
    height: 200px;
    border: 2px solid black;
}

✅ 결과: 박스들이 세로로 중앙 정렬됨.

✅ 예제 4: 항목 크기 조절 (flex-grow)

.box1 {
    flex-grow: 1; /* 남은 공간을 1배 차지 */
    background-color: red;
}
.box2 {
    flex-grow: 2; /* 남은 공간을 2배 차지 */
    background-color: blue;
}
.box3 {
    flex-grow: 1; /* 남은 공간을 1배 차지 */
    background-color: green;
}

✅ 결과: 박스 크기가 1:2:1 비율로 확장됨.

📌 정리

컨테이너에서 display: flex; 하면 Flexbox 활성화됨.
배치 방향 → flex-direction: row(기본) 또는 column.
가로 정렬 → justify-content: center, space-between 등.
세로 정렬 → align-items: center, flex-start 등.
항목 크기 조절 → flex-grow, flex-shrink, flex-basis.

🎯 추천 학습법

직접 코드 치면서 실험해 보기 → justify-content 값들 바꿔보기.
작은 예제부터 차근차근 → row, column 먼저 익히고 justify-content, align-items 추가하기.
개념을 머릿속에 그림으로 그리기 → 예를 들어, 가운데 정렬은 가상의 선이 중앙에서 요소를 잡아당기는 느낌으로 생각.