CSS flex-wrap 속성 – 플렉스 컨테이너의 줄바꿈 허용 설정

정의 및 사용 방법

flex-wrap 속성은 플렉스 컨테이너의 플렉스 아이템들이
한 줄로 제한되는지, 또는 줄바꿈(wrap)이 허용되어 여러 줄을 가질 수 있는지를 설정하며,
여러 줄일 경우 줄이 쌓이는 방향도 함께 설정할 수 있습니다.

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

기본적으로 플렉스 컨테이너는 모든 플렉스 아이템을 강제로 한 줄에 배치하려고 합니다. 이때 플렉스 컨테이너 크기를 초과하더라도 줄바꿈이 발생하지 않습니다.

하지만 flex-wrap 속성을 사용하면, 플렉스 아이템들이 플렉스 컨테이너의 한 줄을 초과할 경우 넘치지 않고 감싸서(wrap) 다음 줄로 넘어가도록 설정할 수 있습니다.

특징

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

기본 예제

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-wrap: /* value <= 라이브 데모에서 동적으로 구현 */
}
.item { /* 플렉스 아이템 */
     border: 4px solid blue;
     background-color: yellow;
}
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

형식 구문

구문

CSS

/* 키워드 값 */
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

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

값

`flex-wrap` 속성의 값
`nowrap`	초깃값임. 플렉스 컨테이너는 모든 플렉스 아이템을 한 줄에 배치합니다. 플렉스 아이템들의 배치가 플렉스 컨테이너 크기를 초과하더라도 줄바꿈이 발생하지 않으며, 한 줄을 초과할 경우 플렉스 컨테이너가 넘칠 수 있습니다.
`wrap`	플렉스 컨테이너는 플렉스 아이템들의 배치가 한 줄의 공간이 부족하면 한 줄을 초과하지 않도록 감싸서(wrap) 다음 줄로 넘어가도록 설정합니다. 즉, 여러 줄에 걸쳐 배치할 수 있습니다.
`wrap-reverse`	`wrap`과 동일하지만, 줄이 쌓이는 방향은 반대가 됩니다. 즉, 시작하는 줄부터 끝나는 줄이 쌓이는 방향은 `wrap`과 반대가 됩니다.

형식 정의

flex-wrap 속성의 형식 정의
초깃값	`nowrap`
적용 요소	플렉스 컨테이너
상속	아니오
애니메이션	아니오

접근성 고려 사항

flex-wrap 속성의 값을 wrap-reverse로 설정하면, 저시력으로 인해 스크린 리더나 접근성 보조 기술을 사용하는 사용자에게는 시각적으로 줄이 쌓이는 방향이 HTML 구조의 순서와 다르게 보여 문서를 이해하기가 훨씬 더 어려워질 수 있습니다.

이러한 시각적 변화는 레이아웃 표현에는 유용할 수 있지만, 콘텐츠의 흐름을 시각적 순서에 의존해 이해해야 하는 경우에는 혼란을 줄 수 있습니다. 따라서 HTML 구조 순서와 시각적 표현이 달라질 수 있다는 점을 고려하여, 사용자 경험에 부정적인 영향을 주지 않는지 확인하는 것이 중요합니다.

활용 예제

flex-wrap 속성은 플렉스 레이아웃에서 여러 줄로 플렉스 아이템을 배치할 때 매우 유용합니다.

다음은 해시태그처럼 길이가 제각각인 요소들이 부모 박스 밖으로 나가지 않게 해주는 예제입니다.