Flex Box란 무엇인가?

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

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

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

flex 컨테이너를 만드는 기본 구문은 다음과 같습니다:

.container {
    display: flex;
}

display: flex;: 이 선언은 선택된 요소를 flex 컨테이너로, 그 직계 자식 요소를 flex 항목으로 바꿉니다.

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>