<h1>Flexbox Auto Margin Demo</h1>

<div class="flex-container" id="flexContainer">
  <div class="flex-item" data-item="1">1</div>
</div>

<div class="controls">
  <div>
    <span>Margin Left:</span>
    <label><input type="radio" name="marginLeft" value="0" checked />0</label>
    <label><input type="radio" name="marginLeft" value="auto" />Auto</label>
  </div>

  <div>
    <span>Margin Right:</span>
    <label><input type="radio" name="marginRight" value="0" checked />0</label>
    <label><input type="radio" name="marginRight" value="auto" />Auto</label>
  </div>
</div>

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

.flex-container {
  display: flex;
  width: 80%;
  height: 200px;
  border: 2px solid #333;
  margin-bottom: 20px;
  gap: 10px;
}

.flex-item {
  background-color: #f08;
  color: white;
  text-align: center;
  padding: 20px;
  flex: 0 1 30px;
  height: 60px; /* Consistent height for demo */
}

.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

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

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

.controls input[type="radio"] {
  margin-right: 5px;
}

const flexContainer = document.getElementById("flexContainer");
const marginLeftRadios = document.querySelectorAll('input[name="marginLeft"]');
const marginRightRadios = document.querySelectorAll('input[name="marginRight"]');

function updateMargins() {
  const marginLeft = document.querySelector('input[name="marginLeft"]:checked').value;
  const marginRight = document.querySelector('input[name="marginRight"]:checked').value;
  const items = document.querySelectorAll(".flex-item");

  items.forEach((item) => {
    item.style.marginLeft = marginLeft;
    item.style.marginRight = marginRight;
  });
}

marginLeftRadios.forEach((radio) => {
  radio.addEventListener("change", updateMargins);
});

marginRightRadios.forEach((radio) => {
  radio.addEventListener("change", updateMargins);
});

// Initialize margins
updateMargins();