CSS - Flexbox

Flexbox

<!-- index.html -->
<!-- Head starts -->
<style>
  #box-container {
    height: 500px;
    /* Make possible to align elements to rows or columns, not both */
    display: flex;
  }

  #box-1 {
    background-color: dodgerblue;
    height: 200px;
    flex-basis: 10em;
  }

  #box-2 {
    background-color: orangered;
    height: 200px;
    flex-basis: 20em;
  }
</style>
<!-- Head ends -->
<!-- Body starts -->
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
<!-- Body ends -->

Justify

<!-- index.html -->
<!-- Head starts -->
<style>
  #box-container {
    background-color: grey;
    /* Make possible to align elements to rows or columns, not both */
    display: flex;
    height: 500px;
    justify-content: center;
  }

  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>
<!-- Head ends -->
<!-- Body starts -->
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
<!-- Body ends -->

Order

<!-- index.html -->
<!-- Head starts -->
<style>
  #box-container {
    height: 500px;
    /* Make possible to align elements to rows or columns, not both */
    display: flex;
  }

  #box-1 {
    background-color: dodgerblue;
    order: 2;
    width: 200px;
    height: 200px;
  }

  #box-2 {
    background-color: orangered;
    order: 1;
    width: 200px;
    height: 200px;
  }
</style>
<!-- Head ends -->
<!-- Body starts -->
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
<!-- Body ends -->

Direction Row Reverse

<!-- index.html -->
<!-- Head starts -->
<style>
  #box-container {
    height: 500px;
    /* Make possible to align elements to rows or columns, not both */
    display: flex;
    flex-direction: row-reverse;
  }

  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>
<!-- Head ends -->
<!-- Body starts -->
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
<!-- Body ends -->

Grow

<!-- index.html -->
<!-- Head starts -->
<style>
  #box-container {
    height: 500px;
    /* Make possible to align elements to rows or columns, not both */
    display: flex;
  }

  #box-1 {
    background-color: dodgerblue;
    height: 200px;
    flex-grow: 1;
  }

  #box-2 {
    background-color: orangered;
    height: 200px;
    flex-grow: 2;
  }
</style>
<!-- Head ends -->
<!-- Body starts -->
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
<!-- Body ends -->

Shrink

<!-- index.html -->
<!-- Head starts -->
<style>
  #box-container {
    height: 500px;
    /* Make possible to align elements to rows or columns, not both */
    display: flex;
  }

  #box-1 {
    background-color: dodgerblue;
    width: 100%;
    height: 200px;
    flex-shrink: 1;
  }

  #box-2 {
    background-color: orangered;
    width: 100%;
    height: 200px;
    flex-shrink: 2;
  }
</style>
<!-- Head ends -->
<!-- Body starts -->
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
<!-- Body ends -->

Property

<!-- index.html -->
<!-- Head starts -->
<style>
  #box-container {
    height: 500px;
    /* Make possible to align elements to rows or columns, not both */
    display: flex;
  }

  #box-1 {
    background-color: dodgerblue;
    width: 100%;
    height: 200px;
    /* Flex grow, shrink and basis respectively */
    flex: 2 2 150px;
  }

  #box-2 {
    background-color: orangered;
    width: 100%;
    height: 200px;
    flex: 1 1 150px;

  }
</style>
<!-- Head ends -->
<!-- Body starts -->
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
<!-- Body ends -->

Wrap

<!-- index.html -->
<!-- Head starts -->
<style>
  #box-container {
    background-color: silver;
    height: 500px;
    /* Make possible to align elements to rows or columns, not both */
    display: flex;
    /* It wraps elements to next line */
    flex-wrap: wrap;
  }

  #box-1 {
    background-color: palegoldenrod;
    width: 25%;
    height: 50%;
  }

  #box-2 {
    background-color: palegreen;
    width: 25%;
    height: 50%;
  }

  #box-3 {
    background-color: paleturquoise;
    width: 25%;
    height: 50%;
  }

  #box-4 {
    background-color: palevioletred;
    width: 25%;
    height: 50%;
  }

  #box-5 {
    background-color: orangered;
    width: 25%;
    height: 50%;
  }

  #box-6 {
    background-color: burlywood;
    width: 25%;
    height: 50%;
  }
</style>
<!-- Head ends -->
<!-- Body starts -->
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
  <div id="box-3"></div>
  <div id="box-4"></div>
  <div id="box-5"></div>
  <div id="box-6"></div>

</div>
<!-- Body ends -->