<h1>Flexbox Alignment Demo</h1>

<div class="flex-container" id="flexContainer">
  <div class="flex-item" data-item="1">1</div>
  <div class="flex-item" data-item="2">2</div>
  <div class="flex-item" data-item="3">3</div>
  <div class="flex-item" data-item="4">4</div>
  <div class="flex-item" data-item="5">5</div>
  <div class="flex-item" data-item="6">6</div>
</div>

<div class="controls">
  <div>
    <label for="flexWrap">Flex Wrap:</label>
    <select id="flexWrap" value="wrap">
      <option value="nowrap">nowrap</option>
      <option value="wrap" selected>wrap</option>
      <option value="wrap-reverse">wrap-reverse</option>
    </select>
  </div>

  <div>
    <label for="alignContent">Align Content:</label>
    <select id="alignContent">
      <option value="stretch">stretch</option>
      <option value="flex-start">flex-start</option>
      <option value="flex-end">flex-end</option>
      <option value="center">center</option>
      <option value="space-between">space-between</option>
      <option value="space-around">space-around</option>
    </select>
  </div>

  <div>
    <label for="alignItems">Align Items:</label>
    <select id="alignItems">
      <option value="stretch">stretch</option>
      <option value="flex-start">flex-start</option>
      <option value="flex-end">flex-end</option>
      <option value="center">center</option>
      <option value="baseline">baseline</option>
    </select>
  </div>
</div>

body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  align-items: stretch;
  width: 80%;
  height: 300px;
  border: 2px solid #333;
  margin-bottom: 20px;
  gap: 10px;
}

.flex-item {
  background-color: #f08;
  color: white;
  text-align: center;
  padding: 20px;
  flex: 0 1 20%;
}

.flex-item:first-child {
  height: 5px; /* Reduced height for flex-item 1 */
}

.flex-item:last-child {
  height: 5px; /* Reduced height for flex-item 6 */
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.controls div {
  display: flex;
  align-items: center;
}

.controls label {
  font-size: 16px;
  margin-right: 5px;
}

select {
  padding: 5px;
}

const flexContainer = document.getElementById("flexContainer");
const flexWrapSelect = document.getElementById("flexWrap");
const alignContentSelect = document.getElementById("alignContent");
const alignItemsSelect = document.getElementById("alignItems");

flexWrapSelect.addEventListener("change", function () {
  flexContainer.style.flexWrap = this.value;
});

alignContentSelect.addEventListener("change", function () {
  flexContainer.style.alignContent = this.value;
});

alignItemsSelect.addEventListener("change", function () {
  flexContainer.style.alignItems = this.value;
});