flex-wrap

예제

줄바꿈 방지

flex-nowrap을 사용하면 플렉스 아이템이 줄바꿈되지 않도록 할 수 있습니다. 이 경우, 아이템이 컨테이너를 넘칠 수 있습니다.

<div class="flex flex-nowrap">  <div>01</div>  <div>02</div>  <div>03</div></div>

일반적인 줄바꿈

flex-wrap을 사용해 플렉스 아이템이 줄바꿈되도록 설정할 수 있습니다:

<div class="flex flex-wrap">  <div>01</div>  <div>02</div>  <div>03</div></div>

Wrap reversed

flex-wrap-reverse를 사용해 플렉스 아이템을 역방향으로 감쌀 수 있습니다:

<div class="flex flex-wrap-reverse">  <div>01</div>  <div>02</div>  <div>03</div></div>

반응형 디자인

접두사 a flex-wrap 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

<div class="flex flex-wrap md:flex-wrap-reverse ...">  <!-- ... --></div>

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.