JSFiddle - React, Tailwind, and code Playground

by Kim Ara

HTML

<div id="wrap01" class="wrap wid33">
      <div class="item01"></div>
      <div class="item02"></div>
      <div class="item03"></div>
   </div>

   <div id="wrap02" class="wrap wid100">
      <div class="item01"></div>
      <div class="item02"></div>
      <div class="item03"></div>
   </div>

   <div id="wrap03" class="wrap wid100">
      <div class="item01"></div>
      <div class="item02"></div>
      <div class="item03"></div>
   </div>

   <div id="wrap04" class="wrap wid100">
      <div class="item01"></div>
      <div class="item02"></div>
      <div class="item03"></div>
   </div>

CSS

* {
         margin: 0;
         padding: 0
      }
      
      .wrap {
         width: 50%;
         height: 100px;
         margin: 20px auto;
         background: #ddd;
         border: 3px solid;
      }
      
      .item01 {
         background: #ff7979;
      }
      
      .item02 {
         background: #4267ff;
      }
      
      .item03 {
         background: #44b26e;
      }
      
      .wid33 div {
         width: 33.33%
      }
      
      .wid100 div {
         width: 100%
      }
      
      #wrap01 {
         display: flex;
         /* 플렉서블 박스 부모 */
         flex-direction: row;
         /* 플렉스 아이템의 배치 방향 설정 : row , row-reverse, column, column-reverse */
      }
      
      #wrap02 {
         display: flex;
         /* 플렉서블 박스 부모 */
         flex-wrap: wrap;
         /* 플렉스 아이템 여러 줄로 배치 : nowrap, wrap , wrap-reverse */
      }
      
      #wrap03 {
         display: flex;
         /* 플렉서블 박스 부모 */
         flex-flow: row wrap-reverse;
         /* 플렉스 배치방향과 여러 줄 배치를 한번에 설정 */
      }