Today, we’re going to learn some of the basics of flexbox and it’s properties including direction, wrap, order, grow, shrink, justify-content and align-items.

We’ll use a simple structure to practice these skills between 2 files — index.html and a style.css.

index.html (don’t forget to link your stylesheet)

The site is going to have 3 header elements that are nested inside their own ‘flex-element’ div and have two parent levels on top — ‘container’ and ‘top-level.’

We’ll start by giving each element a color and the document as a whole a little padding.

Here’s the final result:

The first thing to note is that you should always designate the flex display on the parent element of the items you want inside the flexbox. So instead of including flex on the ‘top-level,’ you will add it to the ‘container’ div.

As you can see, the container still extends the full width and the elements are now automatically contained side-by-side.

To limit the container to the size of the elements inside, you can use ‘inline-flex.’

The remainder of this post will be very picture-heavy to illustrate the power of these properties.

Direction

Options: row (default), row-reverse, column, column-reverse

CSS Designation:

flex-direction: row; 

Examples:

row-reverse
column
column-reverse

Wrap

This property is used specifically for overflow within flexbox containers. Let’s say you added a bunch of elements.

As you can see here, the last element extended past the border on the right.

Options: nowrap(default), wrap, wrap-reverse

CSS Designation:

flex-wrap: nowrap;

I’ve added the rainbow color flow and numbers to show the difference between wrap and reverse.

wrap
wrap-reverse

Wrap goes from the first level to the second and the reverse stars at the second row and then starts again at the top. It is relevant to recognize that if you added a column flex-direction in the container, you do not need a wrap — divs can extend down the screen, but can only take up as much width as the viewport allows.

flex-direction: column;

Order

Let’s go back to the 3 element list to talk about order.

This property does exactly what you’d expect, change the order of the listings.

CSS Designation

order: 1; //or any number

A ‘-1’ adds an element to the front of the list.

You can obviously change the HTML file directly and put the 3rd element first, so this property may be more useful when you are loading elements from a backend database and need to reorder them. It is important to note that this property does not actually change the order in the HTML, it simply renders the elements differently using CSS.

view inside console

Grow, Shrink and Basis

These properties are all used to manipulate the size of the elements.

Grow — specifies how much an item will grow relative to other flexible items in a container.

CSS Designation

flex-grow: 1; 

If you made each element grow by 1, this would simply fill up the container.

Since the sizing is relative to one another, attempting to grow all the items by ‘2’ would not accomplish anything. You can however grow individual items.

For example, let’s say you grew the middle element by 3.

aaaand 5…

flex-grow: 5

Shrink — the opposite of grow

Basis — can be designated to all flexed items or singular. It essentially sets a base length for the element.

CSS Designation:

Here, we are added a basis of 300px to all 3 elements.

Justify-Content

The focus for this property is the x-axis. Using justify-content on the container, you can manipulate where all the flexed elements are rendered horizontally.

Options: flex-start (default), flex-end, center, space-around, space-between

CSS Designation:

justify-content: center; 

Examples:

flex-end
center
space-around
space-between

Align-Items

This property is similar to justify-content, but it is focused on the y-axis. It can be implemented on both the container (to control all flexed elements) or individual flex elements.

Options: stretch (default), flex-start, flex-end, baseline, center

CSS Designation

align-items: stretch;

To illustrate the power of this property, we first need to give our container some height.

stretch (default)
flex-end
center
flex-start and baseline

Flex-start lines up the elements with the container’s beginning and baseline lines up the elements where most of the element’s content sits. To illustrate this difference, we can increase the font for one of the elements.

Flex-start (left) and baseline (right)

You can of course combine justify-content and align-items to accomplish big things. For example, centering all the elements in the middle of a container.

For individual elements, you use ‘align-self.’

Shorthand

There are a few shortcut properties you can use to combine some of the above.

Flex-flow: combines direction and wrap

flex-flow: row wrap; 
flex-flow: column wrap-reverse;

Flex: combines grow, shrink and basis

flex: 0 0 500px; //is the same as:
flex-grow: 0;
flex-shrink: 0;
flex-basis: 500px;

Boom! Now you can flex on all your projects!