Flexbox Utility Classes

The aim with these classes is to be able to layout almost anything with flexbox and not have to write proprietary code. Custom code will be necessary sometimes, but we should try to avoid it as much as possible.

These classes are a work in progress, so we’ll try to keep the documentation up-to-date as we go.

SASS Structure Location: … /sass/_utility.scss

Classes for the wrapper div

Flexbox requires a non-semantic wrapper div to contain the flex items. These are classes you can put on that wrapper div (or other HTML element) to control the layout and behaviour of its child items.

Flexbox layout only affects direct child elements of the parent element which is given flexbox display. If you want to use flexbox on elements which are inside one of the child items, you’ll have to put these classes on the wrapper of those elements as well.

Apart from one of the first two classes, which makes it a flexbox layout, all of these classes are optional. However, you may and often will use several of them, depending on the desired outcome.

Classes to make an element a flex container

  • flex - makes it a flex container, child items will overflow and not wrap if they take up more space than the container allows
  • flex-wrap - makes it a flex container and allows the items to wrap if space requires

Class to change to column direction

  • flex-column - flex default is row layout, this changes it to column - you still need to add the flex or flex-wrap class to the container

Alignment classes

These set how the child items are aligned inside the flex container. The default is flex-start (left side for a row layout, top for a column layout) so this doesn’t need to be specified; use these classes if you want something other than the default behaviour.

  • center - aligns items center
  • end - aligns items to the right of a row flex container or bottom of column container
  • space-around - distributes leftover space on all side of flex items. The space between the first and last items and the beginning/end of the flex container will be half that between each flex item
  • space-between - distributes leftover space evenly between flex items, aligning the first one to the beginning of the flex container and the last one to the end
  • space-evenly - distributes leftover space evenly between flex items, including at beginning and end. All spaces will be equal

Spacing classes

  • flex-margin - adds a 1rem (16px) margin to the right and bottom of each flex item, and a -1rem margin to the right of the flex container to make sure items can align right to the end

Flex grow/shrink classes

Defines whether child items can grow and/or shrink as space allows (note: default values are flex-grow: 0, flex-shrink: 1, so no need for a class to specify them).

A note about flex-grow and shrink: if a flex-basis (width) has been set (which is done by the child item width classes below), flex-grow or flex-shrink works with the flex basis. What this means is that each flex item starts at its flex-basis width, and it will display at that size whenever space allows. If you’ve allowed it to grow, it will do so if it has more space; if you’ve allowed it to shrink, it will do so whenever it has less space than its flex-basis.

Flex-grow and shrink also work with the other flex-items in the same container, and their flex-basis and grow/shrink properties.

Example: let’s say you’ve got three items in a flex container and you give it the .flex-3 class. At full desktop width, those items will display side-by-side. As the screen size gets smaller, two items will display side-by-side, and one will drop below; and as it gets smaller still, the items will display one on top of each other. What happens when there’s not enough room for them to display side-by-side, but the screen size is wider than the flex-basis (width) of an individual item? If the flex-grow value is positive, the item will grow to take up 100% of the width available to it. On the other hand, if the screen size is smaller than the flex-basis of the item, and the flex-shrink value is positive, it will shrink to fit.

  • flex-flex - allows child items both to grow and shrink (flex-grow: 1, flex-shrink: 1)
  • flex-grow - allows child items to grow but not to shrink (flex-grow: 1, flex-shrink: 0)
  • flex-fixed - child items can neither grow nor shrink but will always stay the flex-basis size you define, or their auto size if not defined (flex-grow: 0, flex-shrink: 0)

Child item width classes

These classes define how many flex items fit onto a row at full site width, with or without a sidebar. These will work for the majority of cases, however some contexts may require custom child item flex widths. Keep in mind that items can either grow or shrink (or not) from this basis, depending on what you’ve set using the grow/shrink classes. Default is no growth/can shrink. Keep in mind that if you have a different number of items, or are fitting them into a different-sized space, or if it doesn’t matter how many items are in a row and you want Flexbox to figure it out on its own, just use the .flex or .flex-wrap classes on the container div, and the child items will be automatically sized.

  • flex-2
  • flex-3
  • flex-4
  • flex-5

Child item classes

In some cases, you may wish to override the overall behaviour for individual child flex items. There are a few classes to do that; there may be a need for more later, and they can be added if so. You put these classes on the individual child item(s), rather than the containing wrapper.

  • flex-flex - allows individual child item both to grow and shrink
  • flex-grow - allows individual child item to grow but not shrink
  • flex-fixed - child item can neither grow nor shrink but will always stay its flex-basis size, or its auto size if not defined
  • align-center - aligns the child item to the center of the flex container, regardless of the alignment of other items