The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

To start using the Flexbox model, you need to first define a flex container.

Ex:

<body>
  <div class="container">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
  </div>
</body>

The flex container becomes flexible by setting the display property to flex:

The flex-direction property defines in which direction the container wants to stack the flex items. By default, it is set to row, you can set it to column, column-reverse, row-reverse

.container {
  border: 3px solid lightgray;
  display: flex;
  /* flex item horizontally */
  flex-direction: row;
}

Aligning items

The align-items property is used to align the flex items.

.container {
  /* position all item to the center of main axis, i.e. horizontal */
  justify-content: center;
  /* push all item to the end of cross axis, i.e. vertical */
  align-items: flex-end;
  /* Make the box longer so it can show the vertical axis */
  height: 90vh;
}

If we have too many boxes to fit in a single line, we can set flex-wrap property to wrap, and set align-content property to adjust the alignment:

.container {
  /* Wrap all boxes and push em to the center */
  flex-wrap: wrap;
  align-content: center;
}

.box-one {
  /* only align box-one to the bottom and the rest stay at the center */
  align-self: flex-end;
}

Sizing items