CSS Flexbox Direction - AspireSoftServ

CSS Flexbox Direction - AspireSoftServ

by vinn_aspire

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="styles.css" />

    <title>Static Template</title>
  </head>
  <body>
    <!--- flexbox-direction - start-->
    <div class="flexbox-direction-row">
      <h1>flexbox-direction</h1>
      <h3>row | column | row-reverse | column-reverse</h3>
      <select
        name="flexDirection"
        id="flexDirection"
        onchange="setFlexboxDirectionClass(this.value)"
      >
        <option disabled="disabled" value="select option"
          >select any option</option
        >
        <option value="row">row</option>
        <option value="column">column</option>
        <option value="row-reverse">row-reverse</option>
        <option value="column-reverse">column-reverse</option>
      </select>

      <div class="container row" id="flexDirectionClass">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
      </div>
    </div>
    <!--- flexbox-direction - end-->
  </body>
</html>

CSS

.container {
  display: flex;
}

/* flex-direction property - start*/
.row {
  flex-direction: row;
}
.row-reverse {
  flex-direction: row-reverse;
}
.column {
  flex-direction: column;
}
.column-reverse {
  flex-direction: column-reverse;
}
/* flex-direction property - end*/

.flex-item {
  background: navy;
  padding: 5px;
  margin: 2px 2px;
  width: 50px;
  height: 50px;
  margin-top: 10px;
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

JavaScript

function setFlexboxDirectionClass(value) {
  console.log("value :: " + value);
  var mainContainer = $("#flexDirectionClass");
  mainContainer.removeClass().addClass("container");
  // //adding selected class to container
  mainContainer.addClass(value);
}