[CSS]display:flex; 일때 자식 요소들에 'order'로 좌우측 위치 변경하기

 

display:flex; 로 감싼 레이아웃에서 좌측(컨텐츠영역), 우측(사이드영역)이 존재할때 CSS만으로 위치를 바꾸는 방법입니다.

float 를 사용했을때는 float:left 혹은 float:right 만 변경하면 가능했지만, display:flex; 로 할경우는 다음과 같이 작성해줘야합니다.

 

레이아웃 예시

HTML

<div class="container">
    <div class="aside">
        사이드메뉴
    </div>
    <div class="contents">
        내용
    </div>
</div>

레이아웃은 위와 같다고 가정했을때입니다.

 

CSS

.container {
    display: flex;
}
.contents {
    width: calc(100% - 30%);
}
.aside {
    position: sticky;
    top: 0;
    right: 0;
    align-self: flex-start;
    width: 30%;
}

CSS는 display:flex를 사용해서 작성한 예시입니다.

 

여기서 contents와 aside 위치를 변경하는 방법입니다.

 

변경 CSS

.container {
    display: flex;
}
.contents {
    width: calc(100% - 30%);
    order:1; /* 순서를 1로 설정하여 두 번째로 배치 */
}
.aside {
    position: sticky;
    top: 0;
    right: 0;
    align-self: flex-start;
    width: 30%;
    order:-1; /* 순서를 -1로 설정하여 첫 번째로 배치 */
}

order로 변경이 가능합니다.

위와 같이 변경했을경우 contents가 우측으로, aside가 좌측으로 이동됩니다. (padding등 여백은 그에 맞게 수정)

기본 order:0; 이기 때문에 contents에 order:1; 을 안줘도 상관은 없습니다.

 

다른방법으로 html 구조를 바꿔서 해도 되긴하나, 고정이 아닌 관리자나 레이아웃 옵션을 통해 변경해야할 경우 CSS만으로 유용하게 변경가능합니다.

 

그렇다면 order 속성은 무엇인가?

order 속성은 CSS Flexbox 레이아웃에서 사용되는 속성으로, 플렉스 컨테이너 내의 플렉스 아이템의 배치 순서를 제어합니다. 기본적으로 플렉스 아이템은 HTML 소스 코드의 순서대로 배치되지만, order 속성을 사용하면 이 순서를 변경할 수 있습니다.

기본 사용법

.item {
    order: <integer>;
}

• <integer>는 정수 값을 가지며, 기본값은 0입니다. 이 값이 낮을수록 플렉스 컨테이너 내에서 더 앞쪽에 배치됩니다.

예제

HTML 구조:

<div class="container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
</div>

 

CSS:

.container {
    display: flex;
}

.item {
    padding: 20px;
    margin: 10px;
    background-color: lightgrey;
}

.item1 {
    order: 2; /* 세 번째로 배치 */
}

.item2 {
    order: 1; /* 두 번째로 배치 */
}

.item3 {
    order: 3; /* 네 번째로 배치 */
}

설명

• 기본값 0: order 속성을 지정하지 않으면 기본값 0이 적용되어 HTML 소스 순서대로 배치됩니다.
• 양수와 음수: order 값은 양수와 음수 모두 가능하며, 작은 값이 먼저 배치됩니다.