CIS195 Web Authoring 1: HTML

CSS Flexbox

Contents

Introduction

Flexbox is used to control the layout of elements in one dimension, either horizontally or vertically. This is one of the main differences from the CSS grid, which controls layout in two dimensions.

Defining a Flexbox Container

To use flexbox, you first define a flexbox container using this CSS property: display: flex
You may then place elements inside the flexbox container. For example:

<div style="display:flex;">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

This flexbox container isn't doing anything very interesting yet other than positioning the paragraphs horizontally. (They would normally be stacked vertically.) Here is how the elements are arranged (with borders added to make the elements visible).

Setting the Flexbox Direction

By default the flexbox arranges the elements inside it horizontally. The CSS property flex-direction controls the direction of the flexbox. The options for the value are:

• row: flexbox items are displayed in a horizontal row (default).

• row-reverse: displays flexbox items in reverse order in a row.

• column: flexbox items are displayed in a vertical column.

• column-reverse: displays flexbox items in reverse order in a column.

Example of flex-direction: column:

<div style="display:flex; flex-direction: column;">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

This is rendered in the browser like this:

With flex-direction set to column-reverse it looks like this:

Flexbox Alignment Properties

These properties can be used to further control the positioning of elements inside a flexbox:

align-items

Aligns the flex items in a direction at right angles to the container direction (cross-axis).

• For flex-direction: row, items are spaced vertically.

• For flex-direction: column, items are spaced horizontally.

(This property can also be used on CSS grid containers.)

Value options:

• normal: Default value. Items are stretched to take up the available space.
  We can only see the effect if we give the container some additional height .
  (This is the same as stretch for flexbox containers.)

  Paragraph 1

  Paragraph 2

  Paragraph 3

• stretch: Items are stretched to take up the available space.

• center: Items are in the vertical center of a horizontal flex container.

  • To see this effect on a horizontal flexbox, we need to give the items a fixed height.

    Paragraph 1

    Paragraph 2

    Paragraph 3

  • To see this effect on a vertical flexbox, we need to give the items a fixed width.

    Paragraph 1

    Paragraph 2

    Paragraph 3

• flex-start: Items are stacked at the start of the flex container

  Paragraph 1

  Paragraph 2

  Paragraph 3

• flex-end: Items are stacked at the end of the flex container

  Paragraph 1

  Paragraph 2

  Paragraph 3

• baseline: Items are stacked at the baseline of the flex container

  Paragraph 1

  Paragraph 2

  Paragraph 3

align-content

Aligns the flex items in a direction at right angles to the container direction.
This property determines the spacing between lines, while align-items determines how a group of items are aligned within the container. When there is only one line, this property has no effect. One way to get multiple lines is by applying the property flex-wrap:wrap;.

justify-content

Used to align the flexbox items in a row. This has no effect when the flex-direction is column.

Value options:

• flex-start: Default value. Items are positioned at the beginning of the container.

  Paragraph 1

  Paragraph 2

  Paragraph 3

  • Note that for flex-direction: row-reverse, the start of the container is on the right!

    Paragraph 1

    Paragraph 2

    Paragraph 3

• flex-end: Items are positioned at the end of the container.

  Paragraph 1

  Paragraph 2

  Paragraph 3

• center: Items are positioned in the center of the container.

  Paragraph 1

  Paragraph 2

  Paragraph 3

• space-between: Items will be evenly spaced with the first and last items at the edges of the container.

  Paragraph 1

  Paragraph 2

  Paragraph 3

• space-around: Items will be evenly spaced with half as much space before the first and after the last item.

  Paragraph 1

  Paragraph 2

  Paragraph 3

• space-evenly: Items will have equal space around them.

• Paragraph 1

  Paragraph 2

  Paragraph 3

Flexbox Flow Properties

• flex-wrap Determines whether or not flex items wrap within the flex container.

• flex-flow Shorthand for setting both the flex-direction and flex-wrap properties.

Flex Item Properties

These are properties you can apply to individual items within a flexbox container.

• order Moves the item to a different position.

• align-self This property accepts the same values as align-items.

References

• Chapter 32. Flexbox, in The CSS Handbook, by Falvio Copes

• W3Schools: Flexbox

• MDN Guide: Flexbox

• Flexbox Froggy, fun interactive site for playing with flexbox.

   

Web Authoring Lecture Notes, written by Brian Bird in 2023 are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.