A complete demonstration of CSS flexbox.

To get the full effect of these demonstrations, you'll need to be able to resize your browser window to view the layouts at varying widths. As such, mobile devices are not best suited for this.

An introduction, but not to flexbox.

You know what? I'm gonna spare you the background. There are many other sources with much better descriptions than I could give you of the why, when and how of flexbox's origins and principles. Check out this great guide on CSS-Tricks for starters.

What I want to do is provide a working example of everything that CSS flexbox can do. So what follows is a visual demonstration of the effect of every value option (within reason) of every possible flexbox property. Buckle up!

Contents.

• Flex items
• Initial values
• flex-grow
• flex-shrink
• flex-basis
• align-self
• order
• Flex containers
• Initial values
• display
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content

Flex items.

In this section, I'm going to focus on what you can do with the properties that apply to flex items and will ignore adding flexbox properties to flex containers, except of course for adding display: flex; so that we're actually using flexbox at all.

Initial (default) values.

In this first example, there are no flexbox properties applied to the flex items, so what you see is the default behaviour based on the container having its display property set to 'flex'.

The result is that the flex items display as a row, line up at the start of the conainer, do not grow to fill the container and do not wrap. What you will see is that space is allocated to items based on the content within them.

The initial values for flexbox properties that are applicable to flex items are:

• flex-grow: 0;
• flex-shrink: 1;
• flex-basis: auto;
• order: 0;
• align-self: auto;

flex-grow

Unlike the initial value for flex-grow (which is the equivalent of '0'), you can see that the flex items now grow to fill the container and that they've both grown at the same rate based on their initial widths.

• Flex item 1: flex-grow: 1;
• Flex item 2: flex-grow: 1;

Should we want them to grow at different rates, we can apply different values to the 'flex-grow' properties. Here, Flex item 2 has grown at 3x the rate of Flex item 1.

• Flex item 1: flex-grow: 1;
• Flex item 2: flex-grow: 3;

flex-shrink

The flex-shrink property controls how a flex item adjusts to going below their initial size. The initial value demonstrated in all previous examples is equivalent to '1', so we've already seen the default behaviour demonstrated. Here, Flex item 1 doesn't shrink at all*, whilst Flex item 2 shrinks at 3x the default rate.

• Flex item 1: flex-shrink: 0;
• Flex item 2: flex-shrink: 3;

flex-basis

This sets the initial size of the flex item, although keep in mind that values for 'flex-grow' and 'flex-shrink' may adjust resulting widths set by these values. Whilst the initial value is 'auto' (as seen in all previous examples), this example shows the three flex items have their sizing set using values of different units:

• Flex item 1: flex-basis: 0;
• Flex item 2: flex-basis: 30%
• Flex item 3: flex-basis: 175px;

align-self

So this example introduces something slightly different - a flex container with a height that's greater than the height of the flex items. This brings about the possibility of aligning flex items in a specific way that takes precedence over any alignment set for flex containers. So here's what's going on here...

• Flex item 1: align-self: flex-start;
• Flex item 2: align-self: flex-end;
• Flex item 3: align-self: center;
• Flex item 4: align-self: stretch;

order

The final flexbox property that can be applied at the level of the flex item rather than the flex container, is 'order', which allows us to alter the order in which items are displayed within the flex container.

• Flex item 1: order: 2;
• Flex item 2: order: 1;
• Flex item 3: order: 3;

Flex containers.

This section will now focus on the flexbox properties that can be applied to flex containers - the parent element of flex items.

Initial (default) values.

• flex-direction: row;
• flex-wrap: no-wrap;
• justify-content: flex-start;
• align-items: stretch;
• align-content: normal;
• row-gap: 0;
• column-gap: 0;

display

All of the examples shown before have used display: flex; on the flex container, however this isn't the only option for the 'display' property:

display: inline-flex;

flex-direction

This property controls the direction of the items within the flex container.

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

flex-wrap

The 'flex-wrap' property controls whether a flex container's items will try to fit onto one line as is default, or whether they'll wrap onto multiple lines as needed.

flex-wrap: no-wrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

justify-content

This controls how flex items are distributed across the main axis of the flex container.

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

align-items

This controls how flex items are distributed across the cross axis of the flex container.

align-items: stretch

align-items: flex-start

align-items: flex-end

align-items: center

align-items: baseline

align-content

This controls how lines of flex items are distributed across the cross axis when there are multiple lines - e.g. when flex-wrap: wrap has been applied.

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-between

align-content: space-around

align-content: space-evenly

align-content: stretch