JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<p>align-content: flex-start;</p>
<div class="flex-container type01">
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
</div>

<p>align-content: flex-end;</p>
<div class="flex-container type02">
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
</div>

<p>align-content: center;</p>
<div class="flex-container type03">
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
</div>

<p>{align-content: space-between;</p>
<div class="flex-container type04">
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
</div>

<p>{align-content: space-around;</p>
<div class="flex-container type05">
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
</div>

<p>{align-content: stretch;</p>
<div class="flex-container type06">
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
  <div class="flex-item">00</div>
</div>

CSS

* { padding:0; margin:0;}
.flex-container {
  width: 400px;
  min-height: 250px;
  background:#e4e4e4;
  margin:10px 0 20px;
}
.flex-item { background:#000000;}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    
 }

.flex-container.type01 {align-content: flex-start;}
.flex-container.type02 {align-items: flex-start;}
/*.flex-container.type03 {align-content: center;}
.flex-container.type04 {align-content: space-between;}
.flex-container.type05 {align-content: space-around;}
.flex-container.type06 {align-content: stretch;}*/

.flex-item {
    flex: 0 1 100px;
    align-self:
 }