You are viewing a degraded version of this page. Please use a supported browser for the best reading experience.

Flex

The Web is a Series of Boxes

By default, your browser will make most things on the page the same width of their parent. If you want to put two things on the same row, one of the best ways is to use a feature of modern browsers called Flexbox.

To be honest, this can be quite confusing. The fx/flex asset provides a number of helper classes that you can use to create a variety of layouts.

The simplest way to get started is just to nest some paragraphs or pictures and add the .flex class the new wrapping element. Drag the dotted line on the right below to see how the boxes respond to the parent’s width.

.flex

These boxes will naturally grow their space and wrap to the next line if they have something inside them.

.flex

How smoothly and how sweetly

she lifts me from the bed where I was dreaming

of profound and fragrant fields,

she runs her fingers over my skin and sketches me

in space, suspended, until the kiss

alights curved and recurrent

You can change this behavior by adding the .nowrap class

.flex.nowrap

How smoothly and how sweetly

she lifts me from the bed where I was dreaming

of profound and fragrant fields,

she runs her fingers over my skin and sketches me

in space, suspended, until the kiss

alights curved and recurrent

Creating Grids

For a more orderly look, we can fix the number of columns. In the event that there are more boxes than columns, they will wrap to a new row.

.flex.two-columns

.flex.three-columns

.flex.four-columns

The fx/flex helper classes cover up through .ten-columns as well as .twelve-columns and .sixteen-columns. That may sounds like way too many, but it will be useful once you learn the techniques below.

1

2

3

4

5

6

7

8

9

10

11

12

Making Grids Responsive

It is likely that you will want to make smaller grids on smaller devices so that the elements maintain a reasonable width. You can use the .responsive class to have the columns progressively wrap from four columns on wide screens to one column on a phone-sized screen.

.flex.responsive

A

B

C

D

The column classes have three breakpoints to give you precise control: mobile-, tablet- and laptop-. The fourth breakpoint is desktop- but since it’s the largest size, it doesn’t need a special class. So adding the class .mobile-one-column will make all the grid members expand to the full width on a mobile-sized screen.

.flex.three-columns.mobile-one-column

A

B

C

D

.flex.five-columns.tablet-three-columns.mobile-two-columns

A

B

C

D

E

When you drag the right side of these grids to resize them, we are simulating the effect. When you use these breakpoints in your stories, they are based on the width of the browser window and not the width of the containing element.

Having Boxes Grow To Fill Lines

If we want boxes to expand to fill the lines we can add the .grow class to the parent.

Without .grow

With .grow

Controlling One Box At A Time

We have a different set of classes that allow us to control the size of one box at a time. For example, we can span more columns by adding the classes .span-two, .span-three, and .span-four, etc.

.flex.four-columns

.span-two

.span-three

Justifying Boxes on the Row

You can use the classes .justify-center, .justify-end, .justify-around and .justify-between to position boxes on rows.

.flex.seven-columns

.flex.seven-columns.justify-center

.flex.seven-columns.justify-end

.flex.seven-columns.justify-around

.flex.seven-columns.justify-between

Aligning Boxes in One Row

When the content of the boxes is different sizes, the boxes will grow to fill the row.

.flex.two-columns

“All profound distraction opens certain doors. You have to allow yourself to be distracted when you are unable to concentrate.”

This behavior can be controlled with the following align- classes

.align-start

“All profound distraction opens certain doors. You have to allow yourself to be distracted when you are unable to concentrate.”

.align-center

“All profound distraction opens certain doors. You have to allow yourself to be distracted when you are unable to concentrate.”

.align-baseline uses the bottom of the first line of text. This is often the most pleasing to the eye because the line of text continues from one word to another as you’re reading (although that’s obscured here with the color of the boxes).

“All profound distraction opens certain doors. You have to allow yourself to be distracted when you are unable to concentrate.”

Big Text Has a Lower Baseline

.align-end

“All profound distraction opens certain doors. You have to allow yourself to be distracted when you are unable to concentrate.”

Aligning One Box at a Time

It’s also possible to align one box at a time using the same helper classes.

.align-start

.align-stretch

“But what is memory if not the language of feeling, a dictionary of faces and days and smells which repeat themselves like the verbs and adjectives in a speech, sneaking in behind the thing itself, into the pure present, making us sad or teaching us vicariously...”

.align-center

.align-end

In order for .align-baseline to work, it must be applied to more than one box.

.align-baseline

.align-baseline

Not on the baseline

Making One Box Grow

Just as .grow will make items fill their row, it can be applied selectively to one box.

.flex.four-columns

.grow

Changing the Order of Boxes

One of the best features of Flexbox is its ability to change the order of boxes as they respond to layout changes. This library provides helper classes for first through tenth, as well as last.

A .mobile-last

B

C .tablet-first

Nesting Grids Within Other Grids

Yes you can! Here we have.flex.two-columns with a .flex.four-columns inside of it.

Gotchas

In order to keep spacing in the boxes even, these utility classes use a technique called “negative margin.” This is pretty standard, but it can sometimes cause issues if you’re applying .flex to an item that already has a margin set on it, say from another class. If you notice that the spacing is off, you can simply nest the .flex element inside whatever has the class and that should work better.

Like we said, this get’s quite confusing.