<h1>Flexbox Direction and Align Self Demo</h1>
<div class="flex-container" id="flexContainer">
  <div class="flex-item" id="item1">1</div>
  <div class="flex-item" id="item2">2</div>
  <div class="flex-item" id="item3">3</div>
  <div class="flex-item" id="item4">4</div>
</div>
<div class="controls">
  <div class="control-group">
    <label>Flex Direction:</label>
    <label>
      <input type="radio" name="flexDirection" value="row" checked /> Row
    </label>
    <label>
      <input type="radio" name="flexDirection" value="row-reverse" /> Row
      Reverse
    </label>
    <label>
      <input type="radio" name="flexDirection" value="column" /> Column
    </label>
    <label>
      <input type="radio" name="flexDirection" value="column-reverse" />
      Column Reverse
    </label>
  </div>
  <div class="control-group">
    <label for="alignSelf1">Align Self (Item 1):</label>
    <select id="alignSelf1">
      <option value="auto">Auto</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>
      <option value="stretch">Stretch</option>
    </select>
  </div>
  <div class="control-group">
    <label for="alignSelf2">Align Self (Item 2):</label>
    <select id="alignSelf2">
      <option value="auto">Auto</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>
      <option value="stretch">Stretch</option>
    </select>
  </div>
  <div class="control-group">
    <label for="alignSelf3">Align Self (Item 3):</label>
    <select id="alignSelf3">
      <option value="auto">Auto</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>
      <option value="stretch">Stretch</option>
    </select>
  </div>
  <div class="control-group">
    <label for="alignSelf4">Align Self (Item 4):</label>
    <select id="alignSelf4">
      <option value="auto">Auto</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>
      <option value="stretch">Stretch</option>
    </select>
  </div>
</div>

body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.flex-container {
  display: flex;
  background-color: #f0f0f0;
  padding: 10px;
  min-height: 200px;
  margin-bottom: 20px;
}
.flex-item {
  background-color: #3498db;
  color: white;
  font-size: 20px;
  padding: 20px;
  margin: 5px;
  text-align: center;
  width: 100px;
}
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}
.control-group {
  display: flex;
  flex-direction: column;
}
label {
  margin-bottom: 5px;
}
select,
input[type="radio"] {
  margin-bottom: 10px;
}

window.onload = function () {
  const flexContainer = document.getElementById("flexContainer");
  const flexDirectionInputs = document.getElementsByName("flexDirection");
  const alignSelfSelects = [
    document.getElementById("alignSelf1"),
    document.getElementById("alignSelf2"),
    document.getElementById("alignSelf3"),
    document.getElementById("alignSelf4"),
  ];

  function updateFlexbox() {
    const flexDirection = document.querySelector(
      'input[name="flexDirection"]:checked'
    ).value;
    flexContainer.style.flexDirection = flexDirection;

    alignSelfSelects.forEach((select, index) => {
      const item = document.getElementById(`item${index + 1}`);
      item.style.alignSelf = select.value;
    });
  }

  flexDirectionInputs.forEach((input) =>
    input.addEventListener("change", updateFlexbox)
  );
  alignSelfSelects.forEach((select) =>
    select.addEventListener("change", updateFlexbox)
  );
};