inline-flex vs inline-block

index.html

<!-- <div class="flex-parent"> -->
  
  <div id="box1-parent" class="box200"> 
    <div id="box1-child" class="box100"></div>
  </div>

  <div id="box2-parent" class="box200">
    <div id="box2-child" class="box100"></div>
  </div>
  
<!-- </div> -->

inline-flex-vs-inline-block.markdown

inline-flex vs inline-block

Forked from Q Factor's Pen inline-flex vs inline-block.

A Pen by Bram de Haan on CodePen.

License.

style.css

/* just stuff to build the boxes */
.box200 {
  border: 1px solid grey;
  width: 200px;
  height: 200px;
  background: lightgreen;
  margin-left: 1em;
}

.box100 {
  border: 1px solid grey;
  width: 100px;
  height: 100px;
  background: orange;
}

/* Aligning with two different centering methods */
.flex-parent {
  display: flex;
}

#box1-parent {
  display: inline-block;
  position: relative;
}

#box1-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

#box2-parent {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: top;
  /* float: left; */ /* <-- Adding this works, but I don´t understand why float is necessary? */
}