<h1>Flex-Wrap Property</h1>
  <p>Play with the <code>flex-wrap</code> property to see how the items behave!</p>
  <div class="container">
    <div class="item">🍩 Donut</div>
    <div class="item">🍪 Cookie</div>
    <div class="item">🍫 Chocolate</div>
    <div class="item">🍭 Lollipop</div>
    <div class="item">🍿 Popcorn</div>
    <div class="item">🍎 Apple</div>

.container {
      display: flex;
      flex-wrap: wrap; /* Try changing this to nowrap or wrap-reverse */
      gap: 10px;
      width: 300px;
      border: 2px dashed #4CAF50;
      padding: 10px;
    }
    .item {
      background-color: #FFD700;
      padding: 10px;
      border: 1px solid #000;
      width: 80px;
      text-align: center;
    }