Layouts in CSS: Box Alignment and Distribution

Before closing this chapter, let’s take a look at some properties that we can use for distributing and spacing boxes. These properties can be used with either Flexbox or Grid. Most examples in this section use Flexbox.

First, some terminology: justify versus align. As the CSS Box Alignment specification explains, justify refers to alignment in the main or inline axis, while align refers to alignment in the cross or block axis. Each of the three justify-* properties is concerned with the main, inline dimension. Their align-* counterparts are concerned with the block dimension.

For layouts that use Grid, the main axis depends on the document’s writing mode. When the writing mode is horizontal, the main or inline axis is horizontal—either left to right or right to left—and the cross axis is vertical. For vertical writing modes, the main axis is vertical, and the cross axis is horizontal.

For layouts that use Flexbox, the value of the flex-direction property determines the main axis, and the initial value is row . We discuss writing modes in Chapter 6, “Working with Text”. The document’s writing mode determines whether that main axis is horizontal or vertical.

1. Distributing Items in the Main Axis with justify-content

The justify-content property indicates to the browser how the contents of a container should be aligned along the main or inline axis. It only has an effect when there’s leftover space available—for example, when no flex items have flex-grow: 0 , or when the length of an explicit grid is less than that of its container.

The justify-content property accepts more than a dozen different values. The table below illustrates each value and its impact on box alignment and distribution, when using a left-to- right writing direction. The dotted line represents the outline of the flex or grid container.

The values above can be split into two broad groups: positional alignment values and distributed alignment values.

Positional alignment values indicate where items should be stacked within a container, and include:

  • center
  • Left
  • right
  • start
  • end
  • fLex-start
  • fLex-end

Both justify-content: fLex-start and justify-content: fLex-end only apply to flex containers. For a similar effect in Grid and multicolumn containers, use start or end .

Despite appearances, Left , start , and fLex-start are not the same. Neither are right , end and fLex-end . Writing mode and language direction affect box alignment and distribution for start / fLex-start and end / fLex-end . For example, when the direction is rtL (right to left), justify-content: fLex-start packs boxes against the right edge of the flex container, as shown in the image below.

When flex-start and flex-end are used on non-flex containers, they behave like start and end .

On the other hand, justify-content: Left and justify-content: right always pack boxes to the left or right of the container, respectively. The following image illustrates the effect of justify-content: Left on a container with a horizontal writing mode and right-to-left language direction.

Distributed alignment values indicate how to divvy up the remaining space in a container. Using justify-content: stretch , for example, causes the size of each element to increase evenly to fill the available space, within max-height / max-width constraints. However, it has no effect on flex items.

space-around versus space-evenly

Where space-between places the first and last items flush against the edges of their container and evenly distributes the space, the difference between space-around and space- evenly is more subtle:

  • space-around distributes items evenly within the alignment container, but the size of the space between the first/last item and the edge of the container is half that of the space between each item.
  • space-evenly distributes space evenly between each item. The size of the space between the first/last item and the edge of the container is the same as the size of the space between each item.

2. Aligning Items in the Cross Dimension with align-content

Where justify-content affects items in the main dimension, align-content affects them in the cross or block dimension. The align-content property accepts most of the same values as justify-content , except for left and right .

Remember that align-content , like justify-content , affects the distribution of leftover space. You’ll only notice its impact when the used height of the container is something besides auto . The table below illustrates the impact of align-content and its values when using a horizontal writing mode and a left-to-right text direction.

Baseline alignment is probably the trickiest concept to understand. When items are aligned along a baseline, they’re vertically aligned with the bottom of each letter, without regard for descender height. Descenders are the stem parts of lowercase letters such as q and p that dangle below a line of text. Both baseline and first baseline align items along the first baseline of a row, while last baseline aligns them along the last line of a row.

The align-items property applies to the container element and sets the alignment for all of its children. align-self , on the other hand, applies to the child elements, and overrides the value of align-items . It accepts the same values as align-items . Here’s an example:

.flex-baseline {

display: flex;

align-items: flex-start;

}

.flex-baseline *:nth-child(2) {

align-self: flex-end;

}

Now our second flex item is aligned with the end of the flex container, as shown below.

Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.

Leave a Reply

Your email address will not be published. Required fields are marked *