<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .container {
        display: flex;
        background-color: skyblue;
        height: 500px;
        transition: all 1s;
      }

      .item {
        width: 200px;
        margin: 1rem;
        text-align: center;
        font-size: 24px;
        border: 5px dashed white;
        background: aqua;
        transition: all 1s;
      }
    </style>
  </head>

  <body>
    <div id="container" class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
    </div>

    <h2>.container</h2>

    <label for="">
      flex-direction
      <select name="flex-direction" data-selector="#container">
        <option value="row">row(default)</option>
        <option value="row-reverse">row-reverse</option>
        <option value="column">column</option>
        <option value="column-reverse">column-reverse</option>
      </select>
    </label>
    <br />

    <label for="">
      flex-wrap
      <select name="flex-wrap" data-selector="#container">
        <option value="nowrap">nowrap(default)</option>
        <option value="wrap">wrap</option>
        <option value="wrap-reverse">wrap-reverse</option>
      </select>
    </label>
    <br />

    <label for="">
      justify-content
      <select name="justify-content" data-selector="#container">
        <option value="flex-start">flex-start(default)</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>
        <option value="start">start</option>
        <option value="end">end</option>
        <option value="left">left</option>
        <option value="right">right</option>
        <option value="safe">safe</option>
        <option value="unsafe">unsafe</option>
      </select>
    </label>
    <br />

    <label for="">
      align-items
      <select name="align-items" data-selector="#container">
        <option value="stretch">stretch(default)</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="first baseline">first baseline</option>
        <option value="last baseline">last baseline</option>
        <option value="start">start</option>
        <option value="end">end</option>
        <option value="self-start">self-start</option>
        <option value="self-end">self-end</option>
        <option value="safe">safe</option>
        <option value="unsafe">unsafe</option>
      </select>
    </label>
    <br />

    <label for="">
      align-content
      <select name="align-content" data-selector="#container">
        <option value="normal">normal(default)</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>
        <option value="space-evenly">space-evenly</option>
        <option value="stretch">stretch</option>
        <option value="start">start</option>
        <option value="end">end</option>
        <option value="baseline">baseline</option>
        <option value="first baseline">first baseline</option>
        <option value="last baseline">last baseline</option>
        <option value="safe">safe</option>
        <option value="unsafe">unsafe</option>
      </select>
    </label>

    <h2>.item</h2>

    <label for="">
      order
      <select id="order" name="order" data-selector="order">
        <option value=".item1">item1</option>
        <option value=".item2">item2</option>
        <option value=".item3">item3</option>
        <option value=".item4">item4</option>
        <option value=".item5">item5</option>
        <option value=".item6">item6</option>
      </select>

      <input
        type="number"
        name=""
        value="0"
        id="order-number"
        data-selector="order"
      />
    </label>
    <br />

    <label for="">
      flex-grow
      <select id="flex-grow" name="flex-grow" data-selector="flex-grow">
        <option value=".item1">item1</option>
        <option value=".item2">item2</option>
        <option value=".item3">item3</option>
        <option value=".item4">item4</option>
        <option value=".item5">item5</option>
        <option value=".item6">item6</option>
      </select>

      <input
        type="number"
        name=""
        value="0"
        id="flex-grow-num"
        data-selector="flex-grow"
      />
    </label>
    <br />

    <label for="">
      flex-shrink
      <select id="flex-shrink" name="flex-shrink" data-selector="flex-shrink">
        <option value=".item1">item1</option>
        <option value=".item2">item2</option>
        <option value=".item3">item3</option>
        <option value=".item4">item4</option>
        <option value=".item5">item5</option>
        <option value=".item6">item6</option>
      </select>

      <input
        type="number"
        name=""
        value="0"
        id="flex-shrink-num"
        data-selector="flex-shrink"
      />
    </label>
    <br />

    <label for="">
      flex-basis
      <select id="flex-basis" name="flex-basis" data-selector="flex-basis">
        <option value=".item1">item1</option>
        <option value=".item2">item2</option>
        <option value=".item3">item3</option>
        <option value=".item4">item4</option>
        <option value=".item5">item5</option>
        <option value=".item6">item6</option>
      </select>

      <input
        type="number"
        name=""
        value="0"
        id="flex-basis-num"
        data-selector="flex-basis"
      />

      <select name="flex-basis" id="flex-basis2" data-selector="flex-basis2">
        <option value="auto">auto(default)</option>
        <option value="max-content">max-content</option>
        <option value="min-content">min-content</option>
        <option value="fit-content">fit-content</option>
        <option value="fill">fill</option>
        <option value="content">content</option>
      </select>
    </label>
    <br />

    <label for="">
      align-self
      <select id="align-self" name="align-self" data-selector="align-self">
        <option value=".item1">item1</option>
        <option value=".item2">item2</option>
        <option value=".item3">item3</option>
        <option value=".item4">item4</option>
        <option value=".item5">item5</option>
        <option value=".item6">item6</option>
      </select>

      <select
        name="align-self"
        id="align-self-value"
        data-selector="align-self"
      >
        <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>
    </label>

    <script>
      let container = document.querySelector("#container");

      document.addEventListener(
        "change",
        function (e) {
          let property = e.target.name;
          let value = e.target.value;
          let selector = e.target.dataset.selector;

          switch (selector) {
            case "#container":
              document.querySelector(selector).style[property] = value;
              break;
            case "order": {
              let itemSelector = document.querySelector("#order").value;
              let num = document.querySelector("#order-number").value;
              document.querySelector(itemSelector).style.order = num;
              break;
            }
            case "flex-grow": {
              let itemSelector = document.querySelector("#flex-grow").value;
              let num = document.querySelector("#flex-grow-num").value;
              document.querySelector(itemSelector).style["flex-grow"] = num;
              break;
            }
            case "flex-shrink": {
              let itemSelector = document.querySelector("#flex-shrink").value;
              let num = document.querySelector("#flex-shrink-num").value;
              document.querySelector(itemSelector).style["flex-shrink"] = num;
              break;
            }
            case "flex-basis": {
              let itemSelector = document.querySelector("#flex-basis").value;
              let num = document.querySelector("#flex-basis-num").value;
              document.querySelector(itemSelector).style["flex-basis"] =
                num + "px";
              break;
            }
            case "flex-basis2": {
              let itemSelector = document.querySelector("#flex-basis").value;
              let num = document.querySelector("#flex-basis2").value;
              document.querySelector(itemSelector).style["flex-basis"] = num;
              break;
            }
            case "align-self": {
              let itemSelector = document.querySelector("#align-self").value;
              let num = document.querySelector("#align-self-value").value;
              document.querySelector(itemSelector).style["align-self"] = num;
              break;
            }
          }
        },
        false
      );
    </script>
  </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.