Flex Direction

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

CSS에서 flex-direction 속성은 플렉스 컨테이너 안에서 아이템이 배치되는 방향을 제어합니다. 이 속성은 아이템을 행(row) 또는 열(column)로 배치할지 결정합니다.

이는 또한 justify-content 및 align-items와 같은 속성이 작동하는 방식에 영향을 미칩니다. flex-direction을 올바르게 사용하면 유연하고 반응형인 레이아웃을 구축하는 데 도움이 됩니다.

다음은 flex-direction 속성을 사용하기 위한 기본 구문입니다:

.container {
    display: flex;
    flex-direction: value;
}

value: flex 아이템에 대해 원하는 방향이며, 다음 중 하나일 수 있습니다:

row: 이것은 기본값입니다. Flex 아이템은 왼쪽에서 오른쪽으로 행 방향으로 배치됩니다. 주축은 수평이고, 교차축은 수직입니다.

row-reverse: Flex 아이템들이 오른쪽에서 왼쪽으로, 행 방향으로 배치됩니다. 주축(main axis)은 수평이며, 교차축(cross axis)은 수직입니다.

column: Flex 아이템이 위에서 아래로 세로 방향으로 배치됩니다. 주축은 수직이며, 교차축은 수평입니다.

column-reverse: Flex 아이템이 아래에서 위로, 열 방향으로 배치됩니다. 주축은 수직이며, 교차축은 수평입니다.

예를 들어:

.container-row {
    display: flex;
    flex-direction: row;
}

.container-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

이 예제에서 .container-row 요소는 플렉스 아이템을 왼쪽에서 오른쪽으로 행 방향으로 표시하며, .container-row-reverse 요소는 이를 오른쪽에서 왼쪽으로 표시합니다.

챌린지

쉬움

두 개의 부모 <strong><div></strong> 요소가 있고, 각 부모 요소는 세 개의 자식 <strong><div></strong> 요소를 포함하고 있는 HTML 문서가 주어집니다. 부모 <div> 요소들은 이미 display: flex;를 사용하여 플렉스 컨테이너로 설정되어 있습니다. 여러분의 과제는 flex-direction 속성을 사용하여 플렉스 아이템의 배치를 변경하는 것입니다.

아래 단계를 따르세요:

container1 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요.
- 플렉스 아이템을 세로 열로 배치하기 위해 flex-direction 속성을 column으로 설정하세요.
container2 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요.
- 플렉스 아이템을 역순 세로 열로 배치하기 위해 flex-direction 속성을 column-reverse로 설정하세요.

치트 시트

flex-direction 속성은 플렉스 컨테이너 안에서 아이템들이 배치되는 방향을 제어합니다:

.container {
    display: flex;
    flex-direction: value;
}

값:

row: 기본값. 아이템들이 왼쪽에서 오른쪽으로 배치됩니다 (가로 메인축)
row-reverse: 아이템들이 오른쪽에서 왼쪽으로 배치됩니다 (가로 메인축)
column: 아이템들이 위에서 아래로 배치됩니다 (세로 메인축)
column-reverse: 아이템들이 아래에서 위로 배치됩니다 (세로 메인축)

.container-row {
    display: flex;
    flex-direction: row;
}

.container-column {
    display: flex;
    flex-direction: column;
}

직접 해보기

<html>
<head>
    <title>Flex Direction</title>
    <style>
        .container1, .container2 {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container1">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
    <br>
    <div class="container2">
        <div>Another Item 1</div>
        <div>Another Item 2</div>
        <div>Another Item 3</div>
    </div>
</body>
</html>