<h1>Flexbox Interactive Demo</h1>
<div class="flex-container" id="flexContainer">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</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="column" /> Column
    </label>
  </div>
  <div class="control-group">
    <label for="justifyContent">Justify Content:</label>
    <select id="justifyContent">
      <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>
      <option value="space-evenly">Space Evenly</option>
    </select>
  </div>
  <div class="control-group">
    <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 class="control-group">
    <label for="flexWrap">Flex Wrap:</label>
    <select id="flexWrap">
      <option value="nowrap">No Wrap</option>
      <option value="wrap">Wrap</option>
      <option value="wrap-reverse">Wrap Reverse</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; /* Added fixed width to better demonstrate flex-wrap */
}
.controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.control-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
label {
  margin-bottom: 5px;
}
select,
input[type="radio"] {
  margin-bottom: 10px;
}

const flexContainer = document.getElementById("flexContainer");
const flexDirectionInputs = document.getElementsByName("flexDirection");
const justifyContentSelect = document.getElementById("justifyContent");
const alignItemsSelect = document.getElementById("alignItems");
const flexWrapSelect = document.getElementById("flexWrap");

function updateFlexbox() {
  const flexDirection = document.querySelector(
    'input[name="flexDirection"]:checked'
  ).value;
  const justifyContent = justifyContentSelect.value;
  const alignItems = alignItemsSelect.value;
  const flexWrap = flexWrapSelect.value;

  flexContainer.style.flexDirection = flexDirection;
  flexContainer.style.justifyContent = justifyContent;
  flexContainer.style.alignItems = alignItems;
  flexContainer.style.flexWrap = flexWrap;
}

flexDirectionInputs.forEach((input) =>
  input.addEventListener("change", updateFlexbox)
);
justifyContentSelect.addEventListener("change", updateFlexbox);
alignItemsSelect.addEventListener("change", updateFlexbox);
flexWrapSelect.addEventListener("change", updateFlexbox);