css 줄바꿈 / flex-wrap

<div class="m-10 flex h-20 w-full items-stretch border border-gray-800 p-2 flex-wrap">
  <div class="w-1/3 bg-red-500"></div>
  <div class="w-1/3 bg-green-500"></div>
  <div class="w-1/3 bg-blue-500"></div>
  <div class="w-1/3 bg-yellow-500"></div>
</div>

1. 부모 요소 flex 필수 : axis 기준으로 정렬을 결정할 것 이기 때문

2. flex-wrap : 줄바꿈 요소

3. 자식요소 w-1/3 : 33.333...% 를 차지하며 이를 넘어갈 시 자동 줄바꿈

4. imtems-stretch : subAxis 기준으로 부족한 부분은 자식 요소를 늘려서 가득 채우도록 함