Everything you need to know about alignment in Flexbox

About the author : Rachel Andrew is not only the chief editor of Smashing Magazine, but also a web developer, writer and speaker. She is the author of several books, including The New CSS Layout , one of the developers of the Perch content management system . He writes about business and technology on his website rachelandrew.co.uk .

Summary: in this article we will look at the alignment properties in the Flexbox and some basic rules on how the alignment on the main and transverse axes works.

In the first article in this series, I explained what happens when a property is declared.display: flexfor the item. Now consider the alignment properties and how they work with Flexbox. If you have ever been confused, apply alignor justifyhopefully this article will clarify a lot!

Alignment history in Flexbox

In the entire history of CSS, correct alignment along both axes seemed like the most difficult problem. The emergence of this feature in the Flexbox for many has become the main advantage of this technology. Alignment has been reduced to two lines of CSS .

Alignment properties are now fully defined in the Box Alignment specification . It details how alignment works in different layouts. This means that in the CSS Grid you can use the same properties as in the Flexbox - and in the future in other layouts too. Therefore, any new Flexbox alignment feature will be described in detail in the Box Alignment specification, and not in the next version of Flexbox.

Properties

Many find it difficult to remember whether to use properties that start with align-or with justify-. It is important to remember the following:

• justify-aligns along the main axis in the same direction as flex-direction;
• align-aligns the axis across the direction flex-direction.

It really helps thinking in terms of the main and transverse axes, rather than horizontal and vertical. It does not matter how the axis is physically directed.

Main axis alignment with justify-content

Let's start with the alignment on the main axis. It is implemented using the property justify-content. This property treats all elements as a group and controls the distribution of space between them.

The initial value justify-contentis flex-start. That is why when you declare display: flexall the flex elements line up at the beginning of the line. In writing, from left to right, elements are grouped on the left.


Note that the property justify-contentproduces a visible effect only when space is available . Therefore, if you have a set of elements that takes up all the space on the main axis, justify-contentnothing will come of it.


If you specify a justify-contentvalue for flex-end, all items will be moved to the end of the line. Free space is now at the beginning.


You can do other things with this space. For example, distribute it between our elements using justify-content: space-between. In this case, the first and the last element will be located at the ends of the container, and the entire space will be equally divided between the elements.


We can allocate space with justify-content: space-around. In this case, the available space is divided into equal parts and placed on each side of the element.


New value justify-contentcan be found in the Box Alignment specification; it is not listed in the Flexbox specification. This value space-evenly. In this case, the elements are evenly distributed in the container, and the additional space is equally distributed between the elements and on both sides.



You can play with all the values ​​in the demo .

Values ​​in the same way work vertically, that is, if flex-directionused for column. True, you may not have space in the column for distribution unless you add a height or block-size container, as in this demo .

Axis alignment with align-content

If the container contains several axes and is indicated flex-wrap: wrap, it can be used align-contentto align the lines on the transverse axis. But extra space is required. In this demonstration, the transverse axis runs in the direction of the column, and I indicated the height of the container 60vh. Since this is more than necessary to display all the elements, free space appears vertically.

Then I can apply align-contentwith any of the values .

If flex-directionspecified column, it align-contentworks as in the following example .

As in the case of c justify-content, we work with a group of strings and allocate free space.

Property by place-content

You can find a property in the Box Alignment specification place-content. Using this property means that you simultaneously set justify-contentand align-content. The first value is for align-content, the second is for justify-content. If only one value is given, then it applies to both properties:

.container {
    place-content: space-between stretch;
}

Corresponds to this:

.container {
    align-content: space-between; 
    justify-content: stretch;
}

And such code:

.container {
    place-content: space-between;
}

Equivalent to the following:

.container {
    align-content: space-between; 
    justify-content: space-between;
}

Axis alignment with align-items

Now we know that you can align a set of elements or strings as a group. However, there is another way to align the elements relative to each other on the transverse axis. The container has a height that is determined by the height of the tallest element.


Alternatively, it can be defined as a property heightin the container:


Why elements stretch to the size of the tallest element is because the initial value of the parameter align-itemsis stretch. The elements stretch along the transverse axis to the size of the container in this direction.

Notice that in a multi-line container, each line acts as a new container. The highest element in this line will determine the size of all elements in this line.

In addition to the initial valuestretch, you can assign a align-itemsvalue to the elements flex-start, in which case they are aligned at the beginning of the container and no longer stretch in height.


The value flex-endmoves them to the end of the container along the transverse axis.


If you use a value center, then the elements are centered relative to each other:


We can also align them to the baseline. This ensures text alignment on a single base, as opposed to field alignment around text.


All these options can be tried in the demo .

Individual alignment with align-self

The property align-itemssets the alignment of all elements simultaneously. In fact, it sets values align-selffor all elements of the group. You can also use a property align-selffor any single element to align it within a string and with respect to other elements.

In the following example , the container is used align-itemsto align the entire group in the center, but also align-selffor the first and last elements.

Why not justify-self?

Often the question arises why it is impossible to align one element or group of elements along the main axis. Why is there no property in Flexbox -selfto align on the main axis? If you also present justify-contentit align-contentas a way to allocate space, the answer becomes more obvious. We deal with elements as with a group and place free space in a certain way: either at the beginning, or at the end of a group, or between elements.

It may also be useful to think about how justify-contentthey align-contentwork in CSS Grid Layout. In the grid, these properties are used to allocate free space in the grid container between grid tracks.. Here, too, we take a group of tracks - and with the help of these properties we distribute free space between them. Since we operate in a group in both the Grid and the Flexbox, we cannot take a single element and do something else with it. However, there is a way to get the layout design that layout makers want when they talk about the property selfon the main axis. This is the use of automatic fields.

Using automatic fields on the main axis

If you have ever centered a block in CSS (for example, a wrapper for the content of the main page, setting the fields on the left and right in auto), then you already have some experience with automatic fields. The value autofor the fields fills the maximum space in the set direction. To center the block, we set both left and right margins in auto: each of them tries to take as much space as possible, and therefore places our block in the center.

Automatic fields work very well in Flexbox to align individual elements or groups of elements on the main axis. The following example shows a typical case. There is a navigation bar, the items are displayed as a string and use the initial value.justify-content: start. I want the last item to be displayed separately from the others at the end of the line - provided that there is enough space in the line for that.

We take this element and specify the margin-leftvalue for the property auto. This means that the field is trying to get as much space as possible to the left of the element, that is, the element is pushed to the right border.



If you use automatic fields on the main axis, then it justify-contentwill no longer work, as automatic fields will occupy all the space that would otherwise be distributed by justify-content.

Spare alignment

For each leveling method, a fallback is described - what happens if a given alignment is not possible. For example, if you only have one item in the container, and you specify justify-content: space-betweenwhat should happen? In this case, a spare alignment flex-startis applied — one element will be aligned to the beginning of the container. In the case of justify-content: space-arounda spare alignment center.

In the current specification, you cannot change the spare alignment. There is a note to the specifications that allows the possibility of specifying an arbitrary fallback in future versions.

Safe and unsafe alignment

The concept of safe and unsafe alignment using the safe and unsafe keywords has become a recent addition to the Box Alignment specification .

In the following code, the last element is too wide for the container, and with unsafe alignment and a flexible container on the left side of the page, the element is trimmed because the overflow goes beyond the page boundaries.

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

Safe alignment prevents data loss by moving the overflow to the other side.

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

These keywords are not yet supported by all browsers, but demonstrate how Box Alignment specifications add controls to the Flexbox.

Conclusion

The alignment properties started with a list in Flexbox, but now have a custom specification and apply to other layout contexts. Here are some key facts to help remember their use in the Flexbox:

• justify-for the main axes, and align-for the transverse;
• for align-contentand justify-contentrequired free space;
• properties align-contentand justify-contentapplied to the elements in the group, distributing the space between them. You cannot specify the alignment of a single element, because the property is -selfmissing;
• if you want to align one element or break a group along the main axis, use automatic fields;
• align-itemssets the same properties align-selffor the whole group. Use align-selffor a child of a group to set its value individually.