Flex Box 챌린지

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

챌린지

쉬움

이제 display: flex;, flex-direction, justify-content, 그리고 align-items를 포함한 Flexbox의 기본 사항을 마스터했으므로, 종합적인 챌린지를 통해 지식을 테스트할 시간입니다. 이 챌린지는 유연하고 반응형인 레이아웃을 만들기 위해 이러한 속성들을 함께 사용하는 방법을 확고히 하는 데 도움이 될 것입니다. 각 속성에 대해 배운 내용을 적용하여 특정 디자인을 재현해 보세요.

네 개의 자식 디비전(<div>)을 포함하는 부모 디비전(<div>)이 있는 HTML 문서가 제공됩니다. 여러분의 과제는 배운 Flexbox 속성을 사용하여 아래 이미지에 표시된 디자인과 일치하도록 이러한 요소의 스타일을 지정하는 것입니다.

아래 단계를 따르세요:

container 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요.
.container 요소의 display 속성을 flex로 설정하여 플렉스 컨테이너로 만듭니다.
.container 요소의 flex-direction 속성을 row-reverse로 설정하여 플렉스 아이템을 오른쪽에서 왼쪽으로 행 방향으로 배치합니다.
.container 요소의 justify-content 속성을 space-between으로 설정하여 플렉스 아이템 사이에 공간을 두고 고르게 분산시킵니다.
.container 요소의 align-items 속성을 flex-end로 설정하여 플렉스 아이템을 교차축의 끝에 정렬합니다.
이미지에 표시된 대로 개별 플렉스 아이템(item1, item2, item3, item4)에 서로 다른 배경색과 크기(서로 다른 패딩 사용)를 지정하는 CSS 규칙을 작성하세요.

직접 해보기

<html>
<head>
    <title>Flex Box Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
        <div class="item4">Item 4</div>
    </div>
</body>
</html>