CSS 플렉스 아이템 배치 원리 – 가로·세로 방향과 순서를 유연하게 지정하기

올바른 이해와 사용 방법

flexbox에서 플렉스 아이템을 가로 또는 세로 방향으로 배치하고, 배치 순서를 유연하게 지정하는 방법을 알아봅니다.

flexbox는 일반적인 '블록 레이아웃'보다 다양한 레이아웃을 유연하고 편리하게 구현할 수 있습니다.
특히, flexbox를 생성하는 영역인 플렉스 컨테이너 내부에서는 콘텐츠가 플렉스 아이템 단위로 배치됩니다.

플렉스 컨테이너 내부에서는 자식 요소들이 flexbox로 생성된 레이아웃으로 유연하고 편리하게 배치하거나 정렬할 수 있는데, 플렉스 컨테이너의 자식 요소를 플렉스 아이템이라고 합니다.

플렉스 컨테이너는 CSS Flexible Box Layout Module을 사용해 콘텐츠인 플렉스 아이템에 대해 새로운 플렉스 레이아웃 규칙(flex formatting context)을 설정하는데, 이는 일반적인 블록 컨테이너를 설정하는 것과 동일하지만, 블록 레이아웃 대신 '플렉스 레이아웃'이 사용됩니다.

flexbox가 유용한 이유 중 하나는 플렉스 컨테이너의 자식 요소인 플렉스 아이템을 가로 또는 세로 방향으로 배치하고, 배치 순서를 유연하게 지정할 수 있다는 것입니다.

특징

플렉스 컨테이너 안의 플렉스 아이템을 가로 또는 세로 방향으로 배치할 수 있습니다.
심지어 플렉스 아이템의 배치 순서도 유연하게 지정할 수 있습니다.
단, Flexbox에서는 한 번에 하나의 방향(가로 또는 세로)만 다룰 수 있습니다. 이것은 Grid 레이아웃과 flexbox의 가장 큰 차이점입니다.

플렉스 아이템을 가로 또는 세로 방향으로 배치하기

플렉스 아이템을 가로 또는 세로 방향으로 배치할 수 있습니다.

플렉스 아이템을 가로 또는 세로 방향으로 배치하기 위해서는 flex-direction 속성을 사용합니다.

`flex-direction` 속성

flex-direction 속성은 플렉스 컨테이너 안의 플렉스 아이템이 가로 또는 세로 방향으로 배치되도록 설정합니다.

이 속성은 플렉스 컨테이너에 해당하는 요소에 지정해야 합니다.
플렉스 아이템에 직접 지정하면 적용되지 않습니다.

가로 방향으로 배치하기

row 값은 플렉스 아이템을 가로 방향으로 배치합니다.

CSS

.container {
    display: flex;
    flex-direction: row; /* 가로 방향으로 배치하기 */
    border: 4px dashed silver;
}  
.item {
    border: 4px solid blue;
    background-color: yellow;
} 
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

세로 방향으로 배치하기

column 값은 플렉스 아이템을 세로 방향으로 배치합니다.

CSS

.container {
    display: flex;
    flex-direction: column; /* 세로 방향으로 배치하기 */
    border: 4px dashed silver;
}  
.item {
    border: 4px solid blue;
    background-color: yellow;
} 
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

플렉스 아이템 배치 순서를 유연하게 지정하기

플렉스 아이템의 배치 순서를 유연하게 지정할 수 있습니다.

가로 방향에서 역순으로 배치하기

flex-direction 속성의 row-reverse 값은 플렉스 아이템을 가로 방향에서 역순으로 배치합니다.

CSS

.container {
    display: flex;
    flex-direction: row-reverse; /* 가로 방향에서 역순으로 배치하기 */
    border: 4px dashed silver;
}  
.item {
    border: 4px solid blue;
    background-color: yellow;
} 
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

세로 방향에서 역순으로 배치하기

flex-direction 속성의 column-reverse 값은 플렉스 아이템을 세로 방향에서 역순으로 배치합니다.

CSS

.container {
    display: flex;
    flex-direction: column-reverse; /* 세로 방향에서 역순으로 배치하기 */
    border: 4px dashed silver;
}  
.item {
    border: 4px solid blue;
    background-color: yellow;
} 
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

특정 플렉스 아이템만 원하는 순서에 배치하기

특정 플렉스 아이템만 원하는 순서에 배치하기 위해서는 order 속성을 사용합니다.

`order` 속성

flexbox에서 order 속성은 해당 플렉스 아이템의 배치 순서를 지정합니다.
배치 순서는 정수 값을 사용하며, 값이 작을수록 다른 플렉스 아이템에 비해 시각적으로 먼저 배치됩니다.

설정된 값이 작을수록 다른 플렉스 아이템에 비해 시각적으로 먼저 배치됩니다.
반면에, 값이 클수록 다른 플렉스 아이템에 비해 시각적으로 나중에 배치됩니다.
같은 값의 플렉스 아이템끼리는 HTML의 마크업 순서대로 배치됩니다.

모든 플렉스 아이템은 order 속성을 지정하지 않았을 때 "초깃값으로 0이 할당"됩니다.

가로 방향에서 특정 플렉스 아이템("B")만 맨 처음에 배치하기

CSS

.container {
    display: flex;
    flex-direction: row; /* 가로 방향으로 배치하기 */
    border: 4px dashed silver;
}  
.item {
    border: 4px solid blue;
    background-color: yellow;
} 
.item-b {
    order: -1; /* 값이 작을수록 시각적으로 먼저 배치 */
    background-color: yellowgreen;
}
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

세로 방향에서 특정 플렉스 아이템("B")만 맨 처음에 배치하기

CSS

.container {
    display: flex;
    flex-direction: column; /* 세로 방향으로 배치하기 */
    border: 4px dashed silver;
}  
.item {
    border: 4px solid blue;
    background-color: yellow;
} 
.item-b {
    order: -1; /* 값이 작을수록 시각적으로 먼저 배치 */
    background-color: yellowgreen;
}
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/