CSS Fundamentals: Flexbox

Welcome to part two of how not to spend months floundering around in CSS!

Photo by Christian Fregnan on Unsplash

In all seriousness, the decision to write another article on the subject came as a surprise to me, too. My first on the matter was intended as a singular effort but since I received positive feedback on it — and because writing another article on CSS is itself an endeavor that reinforces my own learning — I’ve decided to keep truckin’ along.

This time, we’re covering CSS Flexbox.

Flexbox is among the handful of CSS systems available , alongside Floats and Grid:

• While Floats are foundational, it only offers horizontal positioning.
• With Grid, we have a similar level of control as Flexbox, but Flexbox bests it in its sheer capacity for customization.

Put simply, we have total control over the alignment, direction, order, and sizes of the boxes we employ with Flexbox.

Let’s get started!

—

Flexbox From 10,000 Feet Up

Flexbox is all about nesting boxes. To nest properly, we have two new boxes at our disposal: flex containers and flex items. Flex containers contain flex items — think of how a chessboard (the flex container) has 64 spaces (the flex items) for pieces to move on.

Flex items are direct HTML descendants of a container. Flexbox’s dynamism comes from how each one of these items can be directly manipulated. In addition, each one of these items can serve as containers for more items. Life is fractal, after all.

To turn an HTML element into a flex container, apply the display rule with a flex declaration: display: flex;

Horizontal Alignment

With Flexbox, alignment translates to the horizontal position of HTML elements. To manipulate a set of items in a container, we usually apply CSS rules to the container itself using justify-content. This is common practice and should be adhered to.

Other values for justify-content include center, space-around, and space-between. The latter two distribute all empty space between each item in a container, perfect for those aesthetically pleasing menus we see everywhere on the internet.

PSA: You Can Group Items

If we don’t want everything in that menu to be considered one set of items subject to the CSS declarations of its parent, we can split them by adding another <div>. When you nest these items in another <div>, you separate them and can apply styling declarations to that new container. This is possible because containers only affect their children, not their grandchildren.

Vertical Alignment

One thing that’s not possible with Floats is vertically aligning HTML elements. To do this, we can declare the align-items property with a number of different values:

All This Wrap And It Ain’t Even Christmas

In this case that you’d rather HTML elements to not go beyond the borders of your defined container (and trust me, this will happen more than you’d like it to), you’ll have to use the flex-wrap: wrap CSS rule to make your little container leak-proof, if you will.

Versatility In Directionality

When I mentioned earlier that Flexbox is far more dynamic than Floats, I meant it.

Change the way items are rendered with a single line: either flex-direction: row OR flex-direction: column.

Keep in mind: when the direction of a set of items is changed, any previous justify-content declarations for the parent container are rotated.

Flex-direction is pretty powerful. It can also change the order in which items appear. This is done with row-reverse or column-reverse values:

And while I know I’ve harped on changing up the items within a container by applying CSS rules to that particular parent container, you can employ the order property and give it a number value. That item will then take that numerical place in order among its adjacent HTML elements.

To do something similar with vertical alignments on individual items, have those individual items align themselves with the — you guessed it — align-self property. The values you have available are flex-start (top), flex-bottom (bottom), center, stretch, and baseline.

Mr. Fantastic But Make It CSS

Each individual is flexible, too! Up until now, every item’s width was determined automatically by the number of items present and the total width of the parent flex container. Declare a flex property on an item and add a numerical value, like 2.

What does that mean? That item will grow twice as quickly than the other items, making it twice the size no matter how many items are added or taken away or how big the parent container is.

That’s all, flex!

In sum:

• Use display: flex to create a flex container.
• Use justify-content to define the horizontal alignment of items.
• Use align-items to define the vertical alignment of items.
• Use flex-direction if you need columns instead of rows.
• Use the row-reverse or column-reverse values to flip item order.
• Use order to customize the order of individual elements.
• Use align-self to vertically align individual items.
• Use flex to create flexible boxes that can stretch and shrink.

Many thanks to the team over at Interneting is Hard for educating me on my CSS fundamentals and inspiring these articles. Their resources are outstanding and I’d recommend them to anyone, so check them out!