display:flex

by Kim Ara

HTML

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

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

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

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

CSS

.wrap {
  width: 50%;
  height: 100px;
  margin: 20px auto;
  background: #ddd;
  border: 3px solid #000;
  color:#fff;
  text-align:center;
}

.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;
  /* 플렉스 배치방향과 여러 줄 배치를 한번에 설정 */
}