JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="flex-container">
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
</ul>

<ul class="flex-container">
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
</ul>

SCSS

body {
  padding: 30px;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;
  li {
    flex-grow: 0;
    flow-shrink: 1;
    flex-basis: 50%;
    background: gray;
  }
}