Inasis의 잡다노트

이곳에서 처음으로 사용해 볼 속성은 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 내부 요소가 일반적인 Block 과 같이 수직 정렬됩니다.

• row 내부 요소가 수평 정렬됩니다.

• column-reverse 내부 요소가 정반대로 수직 정렬됩니다.

• row-reverse 내부 요소가 정반대로 수평 정렬됩니다.

HTML

컨텐츠는 특정 구간을 만드는 태그로 두 번 감싼다.

<div class="wrap-content">

    <div class="content">

    컨텐츠

    </div>

</div>

CSS

실제 길이는 wrap 클래스에서 모두 만들고, body 클래스는 그 위에 떠 있는 상태로 지정된다.

.wrap-content{

    position:relative;

    width:20px ; /* 원하는 길이 */

}

.wrap-content:before {

    content:"";

    display:block;

    padding-top:100%; /* 원하는 높이 */

}

.wrap-content .content {

    position:absolute;

    top:0;

    right:0;

    bottom:0;

    left:0;

}