Qui fert pondus coronae velit

이곳에서 처음으로 사용해 볼 속성은 flow-direction 입니다. 내부 flex 요소들을 어떻게, 어느 방향으로 정렬할지 결정합니다. flow-direction 요소가 지정되지 않을 경우 기본값은 row입니다.

<style>
.view-data{display:flex;}
.data-first{flex-direction:column;}
.data-second{flex-direction:row;}
.data-third{flex-direction:column-reverse;}
.data-fourth{flex-direction:row-reverse;}
</style>
<div class="content">
    <ul class="view-data data-first">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <hr />
    <ul class="view-data data-second">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <hr />
    <ul class="view-data data-third">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <hr />
    <ul class="view-data data-fourth">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

CSS가 적용되지 않는다면 모든 리스트는 순서에 변함없이 화면에 출력됩니다. flex-direction 을 사용하여 실제 작성된 컨텐츠의 순서와 다른 방향으로 출력이 가능합니다.

flex-direction:column;
  • 1
  • 2
  • 3
  • 4
  • 5

flex-direction:row;
  • 1
  • 2
  • 3
  • 4
  • 5

flex-direction:column-reverse;
  • 1
  • 2
  • 3
  • 4
  • 5

flex-direction:row-reverse;
  • 1
  • 2
  • 3
  • 4
  • 5

flex-direction 요소의 값으로 지정 가능한 순서는 다음과 같습니다.

  • column 내부 Flex 요소가 일반적인 Block 과 같이 수직으로 정렬됩니다.
  • row 내부 Flex 요소가 수평으로 정렬됩니다.
  • column-reverse 내부 Flex 요소가 수직으로, 방향은 반대로 정렬됩니다.
  • row-reverse 내부 Flex 요소가 수평으로, 방향은 반대로 정렬됩니다.
카테고리: CSS

1개의 댓글

CSS Flex 사용법 – 이나의 잡답창고 · 2019년 8월 9일 1:06 오전

[…] flow-direction […]

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다