CSS flex-flow 속성 – flex-direction과 flex-wrap의 단축 속성

정의 및 사용 방법

flex-flow 속성은 flex-direction과 flex-wrap 속성을 한 번에 지정할 수 있는 단축 속성입니다.

flex-direction 속성은 플렉스 컨테이너의 주축(main axis) 방향을 설정하여,
플렉스 아이템이 컨테이너 안에서 배치되는 흐름 방향을 결정합니다.
flex-wrap 속성은 플렉스 아이템이 한 줄에 유지될지 또는 여러 줄로 나뉠지를 설정합니다.
여러 줄일 경우 줄이 쌓이는 방향도 함께 설정할 수 있습니다.

flex-flow 속성을 사용하면 이 두 속성을 한 번에 지정할 수 있어서 편리합니다.

특징

이 속성은 플렉스 컨테이너에 해당하는 요소에만 적용됩니다.
플렉스 아이템이나 일반 요소에 지정하면 적용되지 않습니다.

기본 예제

HTML

<div class="flex-container">
    <div class="item">Item-1</div>
    <div class="item">Item-2</div>
    <div class="item">Item-3</div>
    <div class="item">Item-4</div>
    <div class="item">Item-5</div>
    <div class="item">Item-6</div>
</div>

CSS

.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    padding: 10px;
    border: 2px solid silver;
    flex-flow: /* value <= 라이브 데모에서 동적으로 구현 */
}
.item { /* 플렉스 아이템 */
     border: 4px solid blue;
     background-color: yellow;
}
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

형식 구문

구문

CSS

/*
 * flex-flow 속성 값
 * 아래에 나열된 값 중 하나 또는, 둘을 사용하여 지정할 수 있습니다.
 * 값의 순서는 중요하지 않습니다. 순서는 영향을 주지 않습니다.
*/

/* <flex-direction> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* <flex-wrap> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/* <flex-direction>과 <flex-wrap> */
flex-flow: row nowrap; /* 'flex-flow: nowrap row;'와 동일 */
flex-flow: row wrap; /* 'flex-flow: wrap row;'와 동일 */
flex-flow: column nowrap; /* 'flex-flow: nowrap column;'과 동일 */
flex-flow: column-reverse wrap-reverse; /* 'flex-flow: wrap-reverse column-reverse;'와 동일 */

/* 글로벌 값 */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;

값

값에 대한 자세한 내용은 flex-direction 및 flex-wrap 속성의 값을 참조하세요.

형식 정의

flex-flow 속성의 형식 정의
초깃값	`row nowrap` 구성 속성의 초깃값은 다음과 같습니다. `flex-direction`: `row` `flex-wrap`: `nowrap`
적용 요소	플렉스 컨테이너
상속	아니오
애니메이션	아니오

활용 예제

flex-flow 속성은 화면의 폭이 넓은 데스크톱에서는 아이템을 가로로 배치하고, 폭이 좁은 모바일에서는 세로로 배치하는 반응형 웹 디자인을 구현할 때 매우 쉽고 유용합니다.

다음은 반응형 웹 디자인에 적용한 flex-flow 속성의 사용 예제입니다.

HTML

<div class="flex-container">
    <div class="item">1번 아이템</div>
    <div class="item">2번 아이템</div>
    <div class="item">3번 아이템</div>
    <div class="item">4번 아이템</div>
    <div class="item">5번 아이템</div>
    <div class="item">6번 아이템</div>
</div>

CSS

.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    gap: 10px; /* 플렉스 아이템 간격 설정 */
    padding: 10px;
    border: 2px solid #333;
    flex-flow: row wrap; /* 데스크톱 디자인에 적용 */
}
.item {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    box-sizing: border-box; /* 패딩과 테두리를 너비에 포함 */
    flex: 0 0 calc((100% - 20px) / 3); /* calc((100% - (간격개수 * gap)) / 아이템개수) */
    text-align: center;
}

@media (max-width: 750px) {
    .flex-container {
        flex-flow: column nowrap; /* 모바일 디자인에 적용 */
    }
    .item {
        flex: 1; /* 플렉스 아이템들이 가로로 꽉 차게 설정 */
    }
}

이 예제에서는 플렉스 아이템을 균등하게 배치하기 위해 flex 속성과 calc()를 사용했으며, 핵심은 flex-flow를 사용해 반응형 레이아웃을 간단하게 구성하는 것입니다.