Flexbox Basics

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.

As you may already know, before flexbox, web designers relied heavily on floating divs with percentage widths to achieve their desired layout — as explained in this Tutsplus article.

Flexbox Container

First, in order to declare an element as flexbox, add “display: flex” to its properties.

#container 
display: flex;

align-items

Second, in the container, define how you want the children to align using the “align-items” selector.

#container  baseline;
display: flex;

Here are visual representations of the different align-item values:

visual display of flexbox align-items flex-start value
visual display of flexbox align-items flex-end value
visual display of flexbox align-items center value

align-items: center will keep each child centered vertically throughout the row of columns.

visual display of flexbox align-items stretch value

align-items: stretch will stretch each child to the container’s height. Stretch is the initial value for align-items.

visual display of flexbox align-items baseline value

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.

’https://codepen.io/tommyhare/pen/YEBwXP/’

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.