CSS Flex

The CSS flexbox attribute is something of a godsend. It allows you to do things that floats cannot, and generally removes the headaches of using floats. There is a very good guide at CSS Tricks, and this page will not repeat that, but jusst give some examples of flexbox usage.

Flex has two parts, the container, or parent, and the children, or elements. Each of these has a range of properties.

Centering

The parent div has its display set to flex, and the child div (red) has its margins set to auto. That simple.

.parent { display: flex; width: 100%; height: 300px; } .child { width: 40%; height: 100px; margin: auto; }

Two-column

This does exactly what floats do, without the floats. The justify-content property is added to the parent’s CSS, here set to space-between, which sets the left-most element all the way to the left, the right-most all the way to the right, and divides any remaing space evenly between child elements.

#flexColumn { justify-content: space-between; } #flexColumn div.left { width: 55%; height: 100%; background: rgb(195, 0, 0); } #flexColumn div.right { width: 25%; height: 100%; background: rgb(23, 126, 218); }

Here is the same thing with three children:

Full-width, Equal Menu/List

A once-difficult task is made easy with flex. That is a menu/list that runs and entire horizontal width, with each item the same width, as below. There is no fussing with widths for the children. The CSS for the children, in this case the li of the ul, uses a property called flex-grow. Setting this to 1 distributes the remaining space in the parent equally among the children.

ul { display: flex; width: 100%; box-sizing: border-box; margin-top: 1.5em; } li { display: inline; flex-grow: 1; border-width: 1px 0 1px 1px; border-color: rgb(50, 50, 50); border-style: solid; } ul:last-child { border-right: 1px solid rgb(50, 50, 50); }

Now, to put some spacing in between the elements, a different approach is needed.

.parent { display: flex; justify-content: space-between; } .child { width: 20%; border: 1px solid rgb(50, 50, 50); }