<div class="controls">
    <label for="switcher">flex-direction</label>
    <select id="switcher">
      <option value="row">row</option>
      <option value="row-reverse">row-reverse</option>
    </select>
      
      <label for="switcher2">justify-content</label>
    <select id="switcher2">
      <option value="flex-start">flex-start</option>
      <option value="start">start</option>
      <option value="flex-end">flex-end</option>
      <option value="end">end</option>
    </select>
  <p><em>Text direction is left-to-right</em></p>
</div>
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

:root {
  --var-flex-direction: row;
  --var-justify-content: flex-start;
}

.container {
  direction: ltr;
  border: 5px solid rgba(149, 184, 209, 1);
  background-color: rgba(149, 184, 209, .3);
  display: flex;
  gap: 10px;
  block-size: 100px;
  inline-size: 300px;
  flex-direction: var(--var-flex-direction);
  justify-content: var(--var-justify-content);
}

.item {
  background-color: rgba(59, 51, 85, 1);
  color: #fff;
  padding: 10px;
}

.controls {
  margin: 1em 0;
  border: 1px solid #ccc;
  padding: 10px;
}

body {
  font: 1em system-ui;
}

let switcher = document.getElementById("switcher");
let switcher2 = document.getElementById("switcher2");
let root = document.documentElement;

switcher.addEventListener("change", function (evt) {
   root.style.setProperty('--var-flex-direction', evt.target.value);
});

switcher2.addEventListener("change", function (evt) {
   root.style.setProperty('--var-justify-content', evt.target.value);
});