Box Alignment

Once you have items on a flexbox or grid layout, you can control how those items fit inside those layouts.

Space Between

• space(-DIR)(-AMT)
  • DIR
    
    x y
    
  • AMT
    
    0 0.5 1 1.5 2 2.5 3 3.5 4

5 6 7 8 9 10 11 12 14 16

20 24 28 32 36 40 44 48 52

56 60 64 72 80 96 px reverse

Docs Try it

I often just want to put some space in between elements. I know I could use a list, but then I'd have to undo some of the other spacing. Tailwind gives you a real easy set of classes to take care of that.

You get the typical scale from 0 to 96, plus px, which means one pixel.

There's a reverse options when you are using a reverse flex. like when you're using space-x-2 with flex-row-reverse you'd add space-x-reverse.

You can use these without flex on simple items like divs or display blocks, but they work real well with flex items.

Justify Content

• justify(-DIR)
  • DIR
    
    start end center
between around evenly

Docs Try it

Justify content works with either grid or flex items and let you control how elements are postioned in the main axis.

justify-start places items at the beginning, justify-end puts them at the end, justify-center centers them.

Then there's a set of justify classes that spread items around justify-between makes sure there is equal space between the items. justify-around does the same thing, but puts equal space on each side. Finally justify-evenly does the same thing as justify around, but gets rid of the double space.

All of this is better with some samples.

Justify Items

• justify-items(-DIR)
  • DIR
    
    auto start end center stretch

Docs Try it

Specifically for grid items, you can control how items are placed within their axis. This is similar to Justify Content.

justify-items-auto is the default, which looks the same as justify-items-stretch which stretches the items to fit their grid lines.

justify-items-start makes the items align to the beginning of the grid lines, justify-items-end aligns the items to the end, and justify-items-center aligns them to the center of the grid.

Justify Self

• justify-self(-DIR)
  • DIR
    
    auto start end center stretch

Docs Try it

Justify self is similar to Justify items, but applies to a single element.

In the example, you can see that I've set all of the items to use a justify-items-auto layout, but each of the green ones uses one of the other classes.

Align Content

• content(-DIR)
  • DIR
    
    center start end

between around evenly

Docs Try it

Align Content works with flex and grid containers and align based on the cross axis.

The classes are pretty straightforward and much like the justify content classes with content-evenly

In the example, I've given each of the containers a height of 40 units and made sure that the elements that have been aligned have been sized to full heights.

Align Items

• items(-DIR)
  • DIR
    
    center start end

baseline stretch

Docs Try it

Align Items lets you control how different rows are position on flex and grid containers. The example shows you the differences.

Most are straightforward, but take a look at items-baseline. It's slightly different than items-center. Although the text is different sizes, the browser will try to align the baselines when placing the elements.

Also, notice that I have no heights, just different padding on the items which gives them the extra heights.

Align Self

• items(-DIR)
  • DIR
    
    center start end

baseline stretch

Docs Try it

Align self lets you control the alignment of individual items. Notice that self-auto and self-stretch look the same.

Place Content

• place-content(-DIR)
  • DIR
    
    center start end

between around evenly stretch

Docs Try it

Place content lets you take care of justifying and aligning at the same time and you'll see that it's very similar to the content classes, but the names are a combination of content and align.

Place Items

• place-items(-DIR)
  • DIR
    
    auto start end center stretch

Docs Try it

Similarly place items controls how items are justified and aligned.

Place Self

• place-items(-DIR)
  • DIR
    
    auto start end center stretch

Docs Try it

Place self lets you control individual items inside place content containers, helping you justify and align them..