CSS Flexbox Tips and Tricks

CSS Flexbox allows you to easily format your HTML like you never knew was possible. With Flexbox you can align vertically and horizontally, easily. Like the sound of that? Yeah, so do I.

Flexbox is also super useful when you're creating the general layout of your website or app. It is easy to learn, well-supported (in all modern browsers) and is great to work with – not to mention it doesn’t take long to get the basics.

So let's dive right in and learn more.

Flexbox

Here is a list of the Flexbox properties that can be used to position elements in CSS:

CSS that can be applied to a container

display: flexbox | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS that can be applied to items/elements in a container

order: <integer>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;

So now you have your toolkit. But you might ask “What do I do with my tools, and how do I use them?” Well, let me show you.

Display Flex

display: flex; just tells your browser, "hey I would like to use Flexbox with this container, please." This will initialize this box as a Flex container and apply some default Flex properties.

This is what our container looks like without display: flex;:

After adding display: flex; we get the below – you can see that the default Flex properties are applied causing it to look like this:

CSS playground display flex default style

Flex Direction

flex-direction: allows us to control how the items in the container are displayed. Do you want them left to right, right to left, top to bottom or bottom to top? You can do all this easily by setting the Flex direction of the container.

Flexbox applies rows as the default for the direction. Here is what they all look like:

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

Flex Wrap

Flexbox by default will try to fit all elements into one row. But you can change this with the flex-wrap property. This allows you to choose whether the elements will spill over or not.

There are 3 properties for flex-wrap::

flex-wrap: nowrap is the default and will try to fit everything in one row from left to right.

flex-wrap: wrap allows items to go on to create multiple rows from left to right.

flex-wrap: wrap-reverse allows items to be on multiple rows but displays right to left this time.

Flex Flow

Flex flow combines the use of flex-wrap and flex-direction into one property. It is used by first setting the direction and then the wrap.

flex-flow: column wrap; is an example if how to use this.

Justify Content

justify-content is a property that aligns items in the container along the main axis (this changes depending on how content is displayed).

There are multiple options for this. It allows us to fill any empty space in rows but lets us define how we want to ‘justify’ it.

Here are our options when we justify our content: flex-start | flex-end | center | space-between | space-around;.

Align Items

Align items allows us to align items along the cross-axis. This allows content to be positioned in many different ways using justify content and aligns items together.

align-items: flex-start | flex-end | center | baseline | stretch;