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.

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 item 1

Lorem ipsum.

Flex item 2

Lorem ipsum dolor sit amet.

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;

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum dolor sit amet.

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 item 1

Lorem ipsum.

Flex item 2

Lorem ipsum dolor sit amet.

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;
* The width of the flex item is tied to the content inside it. As it happens, the font size is responsive and scales down for smaller screen sizes so the flex item also scales down...but because of the font size, not because of the 'flex-shrink' property.

Flex item 1

Lorem ipsum dolor sit amet.

Flex item 2

Esse veniam nostrud pariatur labore Lorem aliquip.

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;

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

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;

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

Flex item 4

Lorem ipsum.

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 item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

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 item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

flex-direction

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

flex-direction: row;

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

flex-direction: row-reverse;

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

flex-direction: column;

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

flex-direction: column-reverse;

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

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 item 1

Ex ex nisi sint aliqua dolore esse sunt.

Flex item 2

Ex ex nisi sint aliqua dolore esse sunt.

Flex item 3

Ex ex nisi sint aliqua dolore esse sunt.

flex-wrap: wrap;

Flex item 1

Ex ex nisi sint aliqua dolore esse sunt.

Flex item 2

Ex ex nisi sint aliqua dolore esse sunt.

Flex item 3

Ex ex nisi sint aliqua dolore esse sunt.

flex-wrap: wrap-reverse;

Flex item 1

Ex ex nisi sint aliqua dolore esse sunt.

Flex item 2

Ex ex nisi sint aliqua dolore esse sunt.

Flex item 3

Ex ex nisi sint aliqua dolore esse sunt.

justify-content

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

justify-content: flex-start;

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

justify-content: flex-end;

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

justify-content: center;

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

justify-content: space-between;

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

justify-content: space-around;

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

justify-content: space-evenly;

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

align-items

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

align-items: stretch

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

align-items: flex-start

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

align-items: flex-end

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

align-items: center

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

align-items: baseline

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

To demonstrate the 'baseline' value, flex items 1 & 3 have had padding added to the top and bottom respectively.

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

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

Flex item 4

Lorem ipsum.

Flex item 5

Lorem ipsum.

Flex item 6

Lorem ipsum.

align-content: flex-end

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

Flex item 4

Lorem ipsum.

Flex item 5

Lorem ipsum.

Flex item 6

Lorem ipsum.

align-content: center

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

Flex item 4

Lorem ipsum.

Flex item 5

Lorem ipsum.

Flex item 6

Lorem ipsum.

align-content: space-between

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

Flex item 4

Lorem ipsum.

Flex item 5

Lorem ipsum.

Flex item 6

Lorem ipsum.

align-content: space-around

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

Flex item 4

Lorem ipsum.

Flex item 5

Lorem ipsum.

Flex item 6

Lorem ipsum.

align-content: space-evenly

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

Flex item 4

Lorem ipsum.

Flex item 5

Lorem ipsum.

Flex item 6

Lorem ipsum.

align-content: stretch

Flex item 1

Lorem ipsum.

Flex item 2

Lorem ipsum.

Flex item 3

Lorem ipsum.

Flex item 4

Lorem ipsum.

Flex item 5

Lorem ipsum.

Flex item 6

Lorem ipsum.