Flex Box란 무엇인가?

Coddy HTML 여정의 CSS로 스타일링하기 섹션에 포함된 레슨. 76개 중 44번째.

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

Flexbox를 사용하려면 먼저 플렉스 컨테이너를 정의해야 합니다. 요소의 display 속성을 flex 또는 inline-flex로 설정하면 됩니다. 플렉스 컨테이너를 만들면 직계 자식 요소가 자동으로 플렉스 항목이 됩니다.

플렉스 컨테이너를 만드는 기본 구문은 다음과 같습니다.

.container {
    display: flex;
}

display: flex;: 이 선언은 선택한 요소를 플렉스 컨테이너로 만들고, 직계 자식 요소를 플렉스 항목으로 만듭니다.
display: inline-flex;: 인라인 플렉스 컨테이너를 만듭니다. 요소는 인라인 요소처럼 동작하지만, 자식 요소는 모든 Flexbox 기능을 갖춘 플렉스 항목이 됩니다.

flex 컨테이너를 만들면 다양한 Flexbox 속성을 사용해 flex 항목의 레이아웃을 제어할 수 있습니다. 가장 자주 사용되는 속성은 다음과 같습니다.

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

align-items: 교차축을 따라 플렉스 항목을 정렬합니다(예: flex-start, flex-end, center, baseline, stretch).
flex-wrap: 플렉스 항목을 여러 줄로 줄바꿈할지 제어합니다(wrap, nowrap, wrap-reverse).
align-content: 교차축에 여유 공간이 있을 때 플렉스 줄을 정렬합니다(여러 줄에 적용된다는 점만 제외하면 justify-content와 유사합니다).

챌린지

쉬움

세 개의 자식 영역(<div>)이 포함된 영역(<div>)이 있는 HTML 문서가 주어집니다. display: flex; 속성을 사용하여 부모 영역을 플렉스 컨테이너로 바꾸세요. 아래 단계를 따르세요.

클래스가 container인 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요.
.container 요소의 display 속성을 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>