Flexbox knows everything!

Everything You Need To Know About Alignment In Flexbox, by Rachel Andrew

In the first article in this series, I explained what happens when you declare display: flex on an element. This time I’ll walk you through the Alignment Properties and see how they work in Flexbox. If you’ve ever been confused about whether to use the align-* attribute or justify-* attribute, I hope this article helps you out.

A brief history of the Flexbox alignment property

In the history of CSS layouts, the ability to easily align elements on two axes is probably the most daunting problem in Web design. So it was very exciting to see the alignment project functionality in Flexbox for the first time. For example, the following two lines of CSS are easily centered:

See the Pen Smashing Flexbox Series 2: center an item by Rachel Andrew

You might think that these attributes are only used as Alignment attributes in Flexbox layouts, but they are not; these attributes are now defined in the Box Alignment specification. This specification describes how these alignment properties work in different Layout contexts. That is, we can use the same alignment properties used in elastic layouts in A CSS Grid — although there may be other layout contexts in the future. Therefore, in the future new Alignment features in Flexbox will be defined in the Box Alignment specification rather than Flexbox specification.

attribute

Many people have told me that in Flexbox it’s easy to get caught up in the “Do I use the align- or justify attribute here?” The question is confused. Here’s an easy way to remember:

• justify-Operation is the main axis alignment, alignment direction andflex-directionSame direction.
• align-The operation is cross axis alignment, alignment direction withflex-directionIt’s perpendicular.

We use “main axis” and “cross axis” instead of “horizontal” or “vertical” because the orientation of the former (the two axes) is not related to the physical direction.

Spindle alignment: context-content

Let’s start with spindle alignment. For alignment on the main axis, we use the justify-content attribute. This property treats all Flex projects as a group and controls the allocation of space between projects.

The initial value of context-content is flex-start. This is why, after declaring display: flex, all Flex items are aligned at the beginning of the flex line. When flex-direction is row and in a left-to-right language (such as English), the start is on the left.

Flex projects are aligned at the beginning

Note that context-content only works if there is enough space left to allocate. If, on the main axis, there is no space left to allocate after the Flex project has been allocated, context-content does nothing.

No space is available

If we use flex-end for context-content, all items are aligned at the end of the elastic line, with the remaining space in the header.

Flex items are aligned at the end

There are more ways to allocate the remaining space. For example, we can divide space equally between Flex projects, using precision-content: space-between. In this case, the first and last Flex items are placed on the edge of the container, and the remaining space is divided equally between the items.

The remaining space is divided equally between projects

You can also use ustify-content: space-around. In this case, the remaining space is allocated on both sides of each project.

The remaining space is allocated on both sides of each project

Because each project has the same space on both sides. As a result, items are twice as far apart as the edges of the container. The container in this image has a padding value, so the effect may not be as obvious, so let me tell you.

The Box Alignment specification also defines a new value for the justice-content attribute, space-instituted, which does not appear in the Flexbox specification. With this value, the amount of space allocated between projects and containers and between projects is the same.

Items are evenly distributed within the container

The following demo shows the assignment of items with different values:

See the Pen Smashing Flexbox Series 2: justify-content with flex-direction: row by Rachel Andrew

Flex-direction has the same effect on column. Of course, unless you give the Flex container a height or the container itself is block-size, there is no extra space for unmatching. See the demo below:

See the Pen Smashing Flexbox Series 2: justify-content with flex-direction: column by Rachel Andrew

Cross axis alignment: align-content

If the Flex container used flex-wrap: wrap, we would have multiple Flex lines showing the Flex project. The align-content handles the allocation of the remaining space between the intersecting axes. That is, of course, if there is any space left to allocate on the intersecting axis. In the example below, the cross axes are laid out as columns in block direction. I set the height of the container to 60vh, which is more space than the Flex project needs, so we have space to allocate vertically.

We can use the values listed below to lay out the alignment on the cross axis:

See the Pen Smashing Flexbox Series 2: align-content with flex-direction: row by Rachel Andrew

If the flex-direction value is column, the align-content layout is as follows:

See the Pen Smashing Flexbox Series 2: align-content with flex-direction: column by Rachel Andrew

Like sequence-content, align-content allocates the remaining space by treating multiple lines as a group.

Short attribute: place-content

Reading the Box Alignment specification, you find a shorthand attribute place-content, which is a short form of the justify-content and align-content attributes. Place-content accepts two values, the first specifying align-content and the second specifying context-content; If only one value is specified, both properties are set to that value. Therefore:

.container {
    place-content: space-between stretch;
}
/* is equivalent to */
.container {
    align-content: space-between;
    justify-content: stretch;
}

/* if this is used */

.container {
    place-content: space-between;
}
/* is equivalent to */
.container {
    align-content: space-between;
    justify-content: space-between;
}
Copy the code

Cross axis alignment: align-items

We already know that you can align a group of Flex items or multiple Flex lines as groups. But there is a small requirement that you want to align Flex items in a way that relates to each other on the cross axes. The Flex container will have a height that may be determined by the highest Flex project.

The height of the container is determined by the height of the third item

Of course, you can also give the Flex container a height directly:

Height is defined directly on the container

The reason other Flex items stretch as high as the highest item is because the align-items property starts with Stretch. The project is stretched on the cross axis until the dimensions match those of the Flex container.

Notice where the align-items are used. For multi-line Flex containers, each row is like a new Flex container, and the highest Flex item in that row determines the height of the other items in the row.

In addition to the initial value stretch, you can also use flex-start, which aligns flex items along the starting point of the container and does not stretch to the same height as the container.

Flex items are aligned along the starting point of the cross axis

Flex-end aligns flex items along the end of the cross axis.

Flex items are aligned along the endpoint of the cross axis

If center is used, align all items along the center.

Center align items on the cross axis

It can also be based on baseline alignment. Unlike the project-based centerline alignment above, this is aligned against the baseline of the text:

Baseline alignment

You can look at the following figure to see the effect of different values:

See the Pen Smashing Flexbox Series 2: align-items by Rachel Andrew

Single item alignment: align-self

Align -items means to set the alignment of all Flex items at once. In fact, the align-self attribute is set uniformly for all Flex projects. You can also use the align-self attribute on a single Flex project to specify a different alignment within the Flex line than for other Flex projects.

In the following example, we set the align-items property to Center in the Flex container and specify separate alignments for the first and last items.

See the Pen Smashing Flexbox Series 2: align-self by Rachel Andrew

Why is there no context-self?

:

The original author’s interpretation here is a bit far-fetched. In CSS Flexbox, why are there no “sequence-items” and “sequence-self” properties? .

In conclusion, it is not necessary, because it can be solved using the auto Margin solution described below. The specification also introduces the use of Auto Margin to solve the problem of personalized alignment of some items on the main axis.

A common problem is how to align an item or group of items on the main axis. Why is there no -self property on the Flexbox spindle? If you know that justice-content and align-content are used to allocate excess space, you can probably understand why there is no self-alignment attribute. We treat Flex projects as a group and allocate the available space — at the head or tail of the group or between subprojects.

We can think about the role of context-content and align-content properties in a CSS Grid layout. These two properties are used in a Grid to allocate * the space between Grid tracks *. They treat trajectories as a group, and these properties are used to allocate the spacing between these trajectories. Since we operate on a group in both Grid and Flexbox, we can’t do something different for a single project. However, there is a way to achieve the kind of layout required when you request the self attribute on the main axis, and that is to use Auto Margin.

Use Auto Margin on the main axis

If you’ve ever used CSS to center a block element (by setting the left and right margin to Auto for the content page), you already know that Auto Margin implements center behavior. If we set margin: auto in one direction, the margin will occupy as much space as possible in that direction. In the example of using a margin centered block element, we set the left and right margins to Auto, each competing for space as much as possible, and eventually pushing the block element down to the middle.

Auto Margin also performs well in spindle alignment, allowing for alignment of individual items or groups of items. In the following example, I implement a common design pattern — I implement a navigation bar using Flexbox that displays the item as a single line and uses the initial value justify-content: start. I want the last item to appear at the end of the Flex line (assuming, of course, that there is enough space on this line).

I selected this project and gave it margin-left: Auto. This means that the left side of the project takes up as much space as possible, which means that the project is pushed to the right.

See the Pen Smashing Flexbox Series 2: alignment with auto margins by Rachel Andrew

If auto margin is used on the main axis, context-content loses its effect because auto margin takes up all of the space that was allocated to context-content.

The fallback alignment

Each alignment method has a detailed fallback alignment, which is what happens when the requested alignment is not achieved. For example, what if there is only one item in the container and you use context-content: space-between? The answer is to use fallback alignment flex-start and find that the project is aligned at the start of the Flex container; For the justify-conrtent: space-around case, the fallback alignment is center.

In the current specification, we can’t change the fallback alignment, not if you want space-between to use Center instead of Flex-start. A Note in the specification mentions possible support in a future release.

Alignment of Safe and Unsafe

The Box Alignment specification recently added the concept of Safe and Unsafe Alignment, corresponding to the Safe and Unsafe keywords.

In the following code, the last item is too wide for the Flex container and is not securely aligned. The Flex container is on the left side of the page, and when the overflow goes beyond the page boundary, this item is found to be cut off.

.container {  
    display: flex;
    flex-direction: column;
    width: 100px;
    align-items: unsafe center;
}

.item:last-child {
    width: 200px;
}
Copy the code

Unsafe alignment results in data loss

Secure alignment avoids data loss and transfers the overflow to the other side.

.container {
    display: flex;
    flex-direction: column;
    width: 100px;
    align-items: safe center;
}

.item:last-child {
    width: 200px;
}
Copy the code

Secure alignment prevents data loss

See the Pen Smashing Flexbox Series 2: safe or unsafe alignment by Rachel Andrew

conclusion

The alignment attribute originated in Flexbox, but is now in a separate specification and can be used in other layout contexts. Here are a few key facts that will help you remember how to use them in Flexbox:

• justify-Spindle alignment,align-Cross axis alignment;
• usealign-content 和 justify-contentAttribute requires extra free space
• align-content 和 justify-contentProperty treats Flex projects as a group. So there is no single project-specific for these attributes-selfAlign properties.
• You can use Auto Margin if you want to align an item on the main axis, or align parts of the item as a group.
• align-itemsFor uniform setup on Flex projectsalign-selfProperties. Use it on Flex projectsalign-selfUse to set the alignment of this item separately.

(after)