Box Alignment

In addition to using flexbox to place items on the page, Tailwind includes utilities that allow us to be more specific about the alignment and justification of elements within the flexbox. These utilities also work for grid layouts, where appropriate.

We talked about how a flexbox container has a main axis and a cross axis. The Tailwind utilities that affect placement along the main axis start with .justify-, and utilities that affect placement across the cross axis do not. These names are chosen to match the names of the underlying CSS properties.

Main axis

Let’s look at the main axis first. Items can be placed along the main axis in two ways:

1. By placing items along the main axis of the entire flexbox.
2. By placing an individual item along the main axis of its own box within the flexbox container.

Both of these placements can be defined separately and include utilities that are properties of the parent flexbox container, not individual elements.

When placing elements along the main axis, Tailwind includes utilities for how items are placed if the total width of the items is less than the width of the flexbox container. These utilities control how the extra spacing is allocated.

Three utilities squeeze the elements together as closely as they can:

• .justify-start: This places the elements against the beginning of the axis.
• .justify-end: This puts the items against the end of the axis.
• .justify-center: This centers the items—a longstanding CSS frustration.

Utility space

Three utilities space the elements, and they differ in exactly where the spacing is placed:

• .justify-between: This places the first element against the beginning of the flexbox, the last element against the end of the flexbox, and adds even spacing between internal elements. If the flexbox has three items, we get a pattern of AxBxC.

• .justify-evenly: This places an equal amount of space around each item. If the flexbox has three items, four identically sized spaces are placed around them with a pattern of xAxBxCx.

• .justify-around: This places identical spacing around each side of each item. In practice, this makes the end spacing less than the internal space, because each internal space contains the left space of one element and the right space of the other. If the flexbox has three items, six equally sized spaces are placed around them with a pattern of xAxxBxxCx.

An element’s placment within its individual box can be controlled with a class on the container, with the options being .justify-items-start, .justify-items-end, and .justify-items-center. If we want the item to expand to fill its space, we have got .justify-items-stretch, and the reset option is justify-items-auto. We would normally use either a regular .justify- to space items or a .justify-items- to space items within a space, but we wouldn’t normally need to do both. If a single element of the box wants to override the container’s justification, we can use .justify-self- with the same five options that exist for .justify-items.

Cross axis

The utilities along the cross axis are analogous to those of the main axis. Instead of .justify-, Tailwind offers .content- with the same six options, so .content- start pushes items against the top of a multi-row flexbox, while .content-center vertically centers them.

We have the same five options for an individual item as for .justify-items-, but the prefix is .items-. So .items-center vertically centers items along the cross axis. Similarly, the same five options exist for a self override, but the prefix is only .self-, as in .self-start or .self-center.

Finally, we can manage both axes at the same time with the prefixes .place-content-, .place-items-, and .place-self-, with the result equivalent to having done both the main and cross axis spacing. So, .place-content-center is equivalent to the combined .justify-center and .content-center, while .place-items-start is equivalent to .justify-items-start and .items-start.

In the following playground, we’ll try different .justify attributes:

• justify-start
• justify-center
• justify-end