Flex Box란 무엇인가요?

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

CSS에서 Flexbox 레이아웃은 container 안의 items 사이에서 공간을 효율적으로 align하고 분배할 수 있도록 해 주는 강력한 도구입니다. Flexbox를 사용하면 container 내 요소의 align, direction, 순서 및 크기를 제어하여 다양한 화면 크기와 기기에 맞게 조정되는 유연하고 동적인 레이아웃을 만들 수 있습니다.

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

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

.container {
    display: flex;
}

display: flex;: 이 선언은 선택한 요소를 flex 컨테이너로, 해당 요소의 직접적인 자식 요소를 flex 항목으로 변환합니다.

flex container가 있으면 다양한 Flexbox 속성을 사용하여 flex items의 레이아웃을 제어할 수 있습니다. 가장 일반적으로 사용되는 속성은 다음과 같습니다.

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

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

챌린지

쉬움

세 개의 자식 division(<div>)을 포함하는 HTML 문서가 주어집니다. 여러분의 과제는 display: flex; 속성을 사용하여 부모 division을 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>