Flexbox is set of CSS properties that help you
define layout of elements on a page in one direction
–– either horizontally, in
row, or vertically,
We can change a container element into a "flex container"
display: flex; rule, and set the direction
of the flexbox with the
either set to
This is a row flexbox.
We can change how items are aligned using the
align-items CSS properties. The first controls how items
are aligned in the direction of the flexbox, while the latter
controls how items are aligned orthogonally to the direction of the
This flexbox is justified to center everything.
This flexbox aligns everything to the end.
This flexbox uses
space-around, which tells
CSS to leave equal space between all elements in the box.
You can find much more information about the power of flexbox layouts at sites like CSS-Tricks and MDN.