CSS flex-wrap Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Simple demo of flex-wrap */
body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #f3f4f6;
  color: #111827;
}

.container {
  max-width: 900px;
  margin: 0 auto;
}

h2 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
}

.flex-container {
  display: flex;                 /* establishes flex formatting context */
  flex-wrap: wrap;              /* allow items to wrap onto multiple lines */
  gap: 12px;                    /* spacing between items and lines */
  padding: 16px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.item {
  /* fixed base size so items will wrap when container is narrower */
  flex: 0 0 150px;              /* do not grow or shrink, base width 150px */
  height: 100px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.06);
}

/* Example alternative states (commented):
.flex-container-nowrap { flex-wrap: nowrap; }
.flex-container-wrap-reverse { flex-wrap: wrap-reverse; }
*/</style></head><body><div class='container'>
    <h2>flex-wrap: wrap</h2>

    <div class='flex-container'>
      <div class='item'>Item 1</div>
      <div class='item'>Item 2</div>
      <div class='item'>Item 3</div>
      <div class='item'>Item 4</div>
      <div class='item'>Item 5</div>
      <div class='item'>Item 6</div>
      <div class='item'>Item 7</div>
      <div class='item'>Item 8</div>
      <div class='item'>Item 9</div>
    </div>
  </div></body></html>