CSS Flex examples

Flex is a one-dimensional layout method for arranging items in rows or columns.

This is a brief introduction, by way of example, to using flexbox. Flex is a synonym, or synecdoche, for flexbox.

Items flex (expand) to fill additional space or shrink to fit into smaller spaces.
From an introduction to Flexbox by MDN.

Flex examples

The following examples all have the same HTML.

<div class="flex">
          <div>1</div>
          <div>2</div>
          <div>3</div>
        </div>

But their layout is determined by CSS.

Simple flex layout

1
2
3
display: flex;

By default, the direction is set to row:

flex-direction: row;

Wrap content

1
2
3
flex-wrap: wrap;

By default, the browser will fit all the boxes on one row, overriding the fixed box length of 200px.

Applying wrap respects the box length, and pushes any boxes that don't fit onto the next row.

Use the Chrome DevTools to narrow the width of the screen until you see a change in the layout of the three boxes.

Flex justification

The justification property determines spacing of boxes horizontally along the row.

Start

1
2
3

Centre

1
2
3

End

1
2
3

Space around

1
2
3

Space between

1
2
3

Space evenly

1
2
3

Flex direction

Flex can operate horizontally, in rows, or vertically, in columns. 

flex-direction: column;
1
2
3

Related content

Further reading