Flex 방향

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

CSS에서 flex-direction 속성은 플렉스 컨테이너 내부에서 항목이 배열되는 방향을 제어합니다. 항목이 행으로 배치될지 열로 배치될지 결정합니다.

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

다음은 flex-direction 속성을 사용하는 기본 구문입니다.

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

value: 플렉스 항목의 원하는 방향으로, 다음 중 하나일 수 있습니다.

row: 기본값입니다. Flex 항목은 왼쪽에서 오른쪽으로 한 행에 배치됩니다. 주축은 수평이고 교차축은 수직입니다.

row-reverse: Flex 항목은 오른쪽에서 왼쪽으로 한 행에 배치됩니다. 주축은 수평이고 교차축은 수직입니다.

column: Flex 항목은 위에서 아래로 열 방향으로 배치됩니다. 주축은 수직이고 교차축은 수평입니다.

column-reverse: 플렉스 항목은 아래에서 위로 열 방향으로 배치됩니다. 주축은 세로이고 교차축은 가로입니다.

예를 들어:

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

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

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

챌린지

쉬움

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

아래 단계를 따르세요.

클래스가 container1인 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요.
- 플렉스 항목을 세로 열로 배치하도록 flex-direction 속성을 column으로 설정하세요.
클래스가 container2인 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요.
- 플렉스 항목을 역순 열로 배치하도록 flex-direction 속성을 column-reverse로 설정하세요.

직접 해보기

<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>