JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<!-- <div class="group">
  <div class="item">1</div>
  <div class="item">2<br>2</div>
  <div class="item">3<br>3<br>3</div>
  <div class="item">4<br>4<br>4<br>4</div>
</div> -->

<p>justify-content: center;</p>
<div class="group horizontal-center">
  <div class="item">1</div>
  <div class="item">2<br>2</div>
  <div class="item">3<br>3<br>3</div>
  <div class="item">4<br>4<br>4<br>4</div>
</div>

<!-- <p>justify-items: center;</p>
<div class="group horizontal-center-items">
  <div class="item">1</div>
  <div class="item">2<br>2</div>
  <div class="item">3<br>3<br>3</div>
  <div class="item">4<br>4<br>4<br>4</div>
</div> -->

<p>align-items: center;</p>
<div class="group vertical-center-items">
  <div class="item">1</div>
  <div class="item">2<br>2</div>
  <div class="item">3<br>3<br>3</div>
  <div class="item">4<br>4<br>4<br>4</div>
</div>

<p>align-content: center; <br>
부모요소의 높이가 자식요소의 높이보다 클 경우, 자식요소의 높이를 동일하게 유지한 상태에서 중앙정렬을 하고 싶을 경우</p>
<div class="group vertical-center-content01">
  <div class="item">1</div>
  <div class="item">2<br>2</div>
  <div class="item">3<br>3<br>3</div>
  <div class="item">4<br>4<br>4<br>4</div>
</div>

<p>썸네일 갤러리 목록 스타일의 아이템의 같은 열의 아이템요소가 동일한 높이를 유지해야 한다면 부모요소가 flex라면 추가 속성이 필요없다.</p>
<div class="group vertical-center-content">
  <div class="item">1</div>
  <div class="item">2<br>2</div>
  <div class="item">3<br>3<br>3</div>
  <div class="item">4<br>4<br>4<br>4</div>
  <div class="item">2<br>2</div>
  <div class="item">3<br>3<br>3</div>
  <div class="item">2<br>2</div>
  <div class="item">3<br>3<br>3</div>
</div>

<p>align-items: center;</p>
<div class="group vertical-center-content02">
  <div class="item">1</div>
  <div class="item">2<br>2</div>
  <div class="item">3<br>3<br>3</div>
  <div class="item">4<br>4<br>4<br>4</div>
  <div class="item">2<br>2</div>
  <div class="item">3<br>3<br>3</div>
  <div class="item">2<br>2</div>
  <div class="item">3<br>3<br>3</div>
</div>

SCSS

* {
  box-sizing: border-box;
}
.group {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid red;
  &.horizontal-center {
    justify-content: center;
    .item {
      display: inline-flex;
      justify-content: center;
    }
  }
  &.horizontal-center-items {
    justify-items: center;
  }
  &.vertical-center-items {
    align-items: center;
    align-content: center;
  }
  &.vertical-center-content {
    align-content: center;
    .item {
      width: 25%;
    }
  }
  &.vertical-center-content01 {
    align-content: center;
    height: 150px;
    .item {
      heihgt: 50px;
      /* width: 25%; */
    }
  }
  &.vertical-center-content02 {
    align-items: center;
    flex-wrap: wrap;
    .item {
      width: 25%;
    }
  }
  .item {
    /* width: 50px; */
    border: 1px solid green;
    width: 50px;
  }
}
p {
  padding: 0 0 0 30px;
  margin: 30px 0 10px;
}