8. CSS Flexbox

CSS의 Flexbox는 웹페이지 레이아웃을 효율적으로 구성할 수 있는 도구입니다. Flexbox를 사용하면 요소들을 부모 컨테이너 안에서 유연하게 정렬하고 배치할 수 있습니다.

1. Flexbox 기본 설정: display: flex

Flexbox를 사용하려면 먼저 부모 요소에 display: flex를 설정합니다. 이로 인해 자식 요소들이 Flex 컨테이너의 영향을 받게 됩니다.

예제 코드와 설명

.container {
    border: 3px solid black;
    display: flex;
    flex-direction: row;
}

• display: flex;: 부모 요소를 Flex 컨테이너로 만듭니다.
• flex-direction: row;: 자식 요소들을 수평으로 배치합니다. 다른 옵션으로는 column(수직), row-reverse, column-reverse가 있습니다.

실습 예제

<div class="container">
    <div class="flex-item item1">1번</div>
    <div class="flex-item item2">2번</div>
    <div class="flex-item item3">3번</div>
</div>

• 위 코드는 세 개의 자식 요소를 수평으로 배치합니다.

2. Flex 아이템의 크기와 정렬

Flex 아이템의 크기와 정렬은 매우 유연하게 설정할 수 있습니다. flex 속성을 사용하면 각 아이템의 크기를 유연하게 조절할 수 있습니다.

예제 코드와 설명

.flex-item {
    color: black;
    font-size: 50px;
    padding: 24px;
    text-align: center;
    border: 1px solid red;
    width: 100px;
    flex: 1;
}

• flex: 1;: 각 아이템이 Flex 컨테이너 내에서 동일한 비율로 공간을 차지하도록 합니다.

실습 예제

<div class="container">
    <div class="flex-item item1">1번</div>
    <div class="flex-item item2">2번</div>
    <div class="flex-item item3">3번</div>
</div>

• 각 아이템이 컨테이너 내에서 동일한 공간을 차지합니다.

3. Flexbox의 고급 정렬: justify-content와 align-items

Flexbox는 주축과 교차축을 기준으로 요소를 정렬할 수 있습니다. justify-content와 align-items 속성을 사용하면 요소들이 어떻게 정렬될지 결정할 수 있습니다.

예제 코드와 설명

.container2 {
    border: 3px solid black;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

• justify-content: space-between;: 자식 요소들이 주축(가로축)을 기준으로 양 끝에 배치되며, 요소 간의 간격을 균등하게 조절합니다.
• align-items: center;: 자식 요소들이 교차축(세로축) 기준으로 가운데 정렬됩니다.

실습 예제

<div class="container2">
    <div class="flex-item2 item1">1번</div>
    <div class="flex-item2 item2">2번</div>
    <div class="flex-item2 item3">3번</div>
    <div class="flex-item2 item4">4번</div>
    <div class="flex-item2 item5">5번</div>
    <div class="flex-item2 item6">6번</div>
</div>

• 여러 개의 아이템이 Flexbox의 주축과 교차축에 따라 균등하게 정렬됩니다.