Flex Box란 무엇인가요?

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 44번째.

CSS에서 Flexbox 레이아웃은 컨테이너 내의 아이템들 사이에 공간을 정렬하고 배분하는 효율적인 방법을 제공하는 강력한 도구입니다. Flexbox를 사용하면 컨테이너 내 요소의 정렬, 방향, 순서 및 크기를 제어하여 다양한 화면 크기와 기기에 적응하는 유연하고 동적인 레이아웃을 만들 수 있습니다.

Flexbox를 사용하려면 먼저 flex 컨테이너를 정의해야 합니다. 이는 요소의 display 속성을 flex 또는 inline-flex로 설정하여 수행됩니다. flex 컨테이너를 생성하면 그 직계 자식 요소들은 자동으로 flex 아이템이 됩니다.

플렉스 컨테이너를 생성하기 위한 기본 구문은 다음과 같습니다:

.container {
    display: flex;
}

display: flex;: 이 선언은 선택된 요소를 플렉스 컨테이너로 만들고, 그 직계 자식 요소들을 플렉스 아이템으로 만듭니다.

플렉스 컨테이너(flex container)를 생성하고 나면, 다양한 Flexbox 속성을 사용하여 해당 플렉스 아이템(flex items)의 레이아웃을 제어할 수 있습니다. 가장 일반적으로 사용되는 속성 중 일부는 다음과 같습니다:

flex-direction: 플렉스 아이템의 방향을 지정합니다 (row, column, row-reverse, column-reverse).
justify-content: 주축을 따라 플렉스 아이템을 정렬합니다 (예: flex-start, flex-end, center, space-between, space-around).

align-items: 교차 축(cross axis)을 따라 플렉스 아이템들을 정렬합니다 (예: flex-start, flex-end, center, baseline, stretch).
flex-wrap: 플렉스 아이템들이 여러 줄에 걸쳐 줄바꿈을 할지 여부를 제어합니다 (wrap, nowrap, wrap-reverse).
align-content: 교차 축에 여유 공간이 있을 때 플렉스 라인들을 정렬합니다 (justify-content와 유사하지만 여러 줄에 해당함).

챌린지

쉬움

세 개의 자식 div(<div>)를 포함하는 div(<div>)가 있는 HTML 문서가 주어집니다. 여러분의 작업은 display: flex; 속성을 사용하여 부모 div를 플렉스 컨테이너로 만드는 것입니다. 아래 단계를 따르세요:

container 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요.
.container 요소의 display 속성을 flex로 설정하세요.

치트 시트

flex 컨테이너를 만들려면 display 속성을 flex로 설정하세요:

.container {
    display: flex;
}

이렇게 하면 해당 요소는 flex 컨테이너가 되고, 그 직계 자식 요소들은 flex 아이템이 됩니다.

레이아웃 제어를 위한 일반적인 Flexbox 속성들:

flex-direction: flex 아이템의 방향 (row, column, row-reverse, column-reverse)
justify-content: 메인 축(main axis)을 따라 아이템을 정렬합니다 (flex-start, flex-end, center, space-between, space-around)
align-items: 교차 축(cross axis)을 따라 아이템을 정렬합니다 (flex-start, flex-end, center, baseline, stretch)
flex-wrap: 줄 바꿈을 제어합니다 (wrap, nowrap, wrap-reverse)
align-content: 교차 축에 여유 공간이 있을 때 flex 라인을 정렬합니다

직접 해보기

<html>
<head>
    <title>What is a Flex Box?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>