flex wrap

<h1>flex wrap</h1>
  <p>flex item을 감쌀 것인지 결정</p>

  <style>
    .container {
      border: 1px solid;
    }

    .item {
      background-color: #ddd;
      width: 200px;
      padding: 0.5rem;
    }

    .flex {
      display: flex;
    }
    
    .flex-nowrap {
      flex-wrap: nowrap;
    }

    .flex-wrap {
      flex-wrap: wrap;
    }
  </style>

  <h3>flex wrap: nowrap (기본값)</h3>
  <pre>
    아이템의 크기가 줄어든다
  </pre>

  <div class="container flex flex-nowrap">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
  </div>

  <h3>flex wrap: wrap</h3>
  <pre>
    아이템을 감싼다
  </pre>

  <div class="container flex flex-wrap">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
  </div>