Flex Wrap

Flex Wrap (flex-wrap)

flex 항목들이 컨테이너 너비를 넘칠 때 줄바꿈(wrap)할지 말지를 정해 주는 유틸리티예요. 항목들을 여러 줄로 흐르게 할지, 한 줄에 몰아넣고 넘치게 할지를 제어할 수 있어요.

출처: 문서

flex-nowrap flex-wrap: nowrap;

flex-wrap flex-wrap: wrap;

flex-wrap-reverse flex-wrap: wrap-reverse;

flex-nowrap을 사용하면 flex 항목이 줄바꿈되지 않게 막을 수 있어요. 필요하다면 유연하지 않은(flexible하지 않은) 항목이 컨테이너를 넘치게(overflow) 만들 수도 있죠.

01 02 03

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

flex-wrap을 사용하면 flex 항목이 줄바꿈될 수 있게 해요.

01 02 03

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

flex-wrap-reverse를 사용하면 flex 항목을 반대 방향으로 줄바꿈할 수 있어요.

01 02 03

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

flex-wrap 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.

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

variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.