Box Alignment
Explore how to control alignment and spacing of elements within flexbox and grid layouts using Tailwind CSS utilities. Learn to apply justify-start, justify-center, and content-center among others for precise control on main and cross axes, and how to manage individual item placement with justify-self and self utilities.
We'll cover the following...
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:
- By placing items along the main axis of the entire flexbox.
- 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. ...