<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Flexbox Essentials</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <h1>Flexbox Essentials</h1>
      <div class="inner-wrapper">
        <h2>1.flex-direction</h2>
        <div class="container">
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
        </div>
      </div>
      <div class="inner-wrapper flex-wrapper">
        <h2>2.flex-wrap</h2>
        <div class="container">
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
        </div>
      </div>
      <div class="inner-wrapper justify-wrapper">
        <h2>3.justify-content</h2>
        <div class="container">
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
        </div>
      </div>
      <div class="inner-wrapper align-wrapper">
        <h2>4.align-items</h2>
        <div class="container">
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
        </div>
      </div>
      <div class="inner-wrapper align-content-wrapper">
        <h2>5.align-content</h2>
        <div class="container">
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
        </div>
      </div>
      <div class="inner-wrapper order-wrapper">
        <h2>6.order</h2>
        <div class="container">
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
        </div>
      </div>
      <div class="inner-wrapper grow-wrapper">
        <h2>7.flex-grow</h2>
        <div class="container">
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
        </div>
      </div>
      <div class="inner-wrapper shrink-wrapper">
        <h2>8.flex-shrink</h2>
        <div class="container">
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
        </div>
      </div>
      <div class="inner-wrapper basis-wrapper">
        <h2>9.flex-basis</h2>
        <div class="container">
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
        </div>
      </div>
      <div class="inner-wrapper self-wrapper">
        <h2>10.align-self</h2>
        <div class="container">
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>
body {
  font-family: futura;
}

.wrapper {
  width: 400px;
  margin: 50px auto;
}

.wrapper h1 {
  text-align: center;
  margin-bottom: 40px;
}

.inner-wrapper {
  margin-bottom: 40px;
  padding: 0 20px;
}

.inner-wrapper h2 {
  border-bottom: 1px dashed lightslategray;
  padding-bottom: 10px;
  font-size: 22px;
  color: #555;
  font-weight: normal;
}

.container {
  background: lightslategray;
  padding: 4px;
  -webkit-display: flex;
  -moz-display: flex;
  display: flex;
  flex-direction: row;
}

.item {
  background: #fff;
  text-align: center;
  font-size: 15px;
  margin: 4px;
  line-height: 34px;
  color: lightslategray;
  width: 40px;
}

/*flex-wrap*/

.flex-wrapper .container {
  flex-wrap: nowrap;
}

.flex-wrapper .item {
  width: 50%;
}

/*justify-content*/

.justify-wrapper .container {
  justify-content: space-around;
}

.justify-wrapper .item {
  width: 40px
}

/*align-items*/

.align-wrapper .container {
  height: 120px;
  align-items: stretch;
}


/*align-content*/

.align-content-wrapper .container {
  align-content: center;
  height: 120px;
  flex-wrap: wrap;
}

.align-content-wrapper .item {
  width: 30%;
}

/*order*/

.order-wrapper .item:nth-child(2) {
  order: 1;
  background: lightcoral;
  color: #fff;
}

/*flex-grow*/

/*.grow-wrapper .item {
  flex-grow: 1;
}*/

.grow-wrapper .item:nth-child(2) {
   background: lightcoral;
  color: #fff;
  flex-grow: 2;
} 

/*flex-shrink*/

.shrink-wrapper .item {
  width: 20%;
}

.shrink-wrapper .item:nth-child(2) {
  background: lightcoral;
  color: #fff;
  flex-shrink: 2;
} 

/*flex-basis*/

.basis-wrapper .item {
  width: 20%;
}

.basis-wrapper .item:nth-child(2) {
  background: lightcoral;
  color: #fff;
  flex-basis: 20px;
} 

/*align-self*/

.self-wrapper .container {
  height: 120px;
  justify-content: space-around;
}

.self-wrapper .item {
  height: 40px;
}

.self-wrapper .item:nth-child(2) {
  background: lightcoral;
  color: #fff;
  align-self: flex-end;
} 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.