Flexbox (or Flexible Box Layout Module) was designed to give web designers an easier way to build their html layouts. Here I will give you basic flexbox layout examples to learn from and build off. Learn the differences between flexbox vs grid.
This is not a complete guide to flexbox, but in this article I will teach you the properties you must know.
In addition, I wrote an article on the 12 Exciting New Magic CSS3 Selectors You Need To Know In 2017 you may also find useful.
First, in order to declare an element as flexbox, add “display: flex” to its properties.
Second, in the container, define how you want the children to align using the “align-items” selector.
Here are visual representations of the different align-item values:
align-items: center will keep each child centered vertically throughout the row of columns.
align-items: stretch will stretch each child to the container’s height. Stretch is the initial value for align-items.
align-items: baseline sets the children to align themselves to keep the start of the content aligned together at the top.
Play around with these settings in this flexbox playground I setup for you. Also, be sure to change the container’s align-items value to one of the values shown above. To do this, click on the “Edit on Codepen” link in the upper-right hand corner of the preview box below.
See more details about align-items at the Mozilla Developer docs.
Also: Traditional uses of float, clear and vertical-align don’t have affect on flex items.