JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="flex grow">
  <li>flex: 0 1 200px</li>
  <li>flex: 0 1 200px</li>
  <li>flex: 0 1 200px</li>
</ul>

<ul class="flex shrink">
  <li>flex: 1 1 200px</li>
  <li>flex: 1 1 200px</li>
  <li>flex: 1 1 200px</li>
</ul>

<ul class="flex type01">
  <li>AA</li>
  <li>BBBBBBBBBBBB</li>
  <li>CCCCC</li>
</ul>

SCSS

* {
  box-sizing: border-box;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px;
  &.grow {
    li {
      flex: 0 1 200px;
    }
  }
  &.shrink {
    li {
      flex: 1 1 200px;
    }
  }
  &.type01 {
    li {
      /* padding: 0 !important; */
      flex-basis: 100px;
    }
  }
  li {
    /* padding: 40px; */
    background: yellowgreen;
  }
}