When aligning items to the start and end of a line in flexbox, there are a number of values to choose from. In this post I'm going to explain the difference between some values which appear to do very similar things:
self-end values are available in Firefox, and in Chrome Canary. They are expected to ship in Chrome 93. For the demos to work you will need a supporting browser.
Some flexbox terminology
There are some terms that are useful in helping to understand alignment in flexbox. I'll be using them below, and they will help if you want to read more about this subject in the Box Alignment specification.
The alignment container
This is the parent of your flex items, therefore the element that has
display: flex added to it.
The alignment subject
This is a flex item, the thing that is being aligned.
The main axis
This is the direction of the
flex-direction property. If the value of this property is
row your main axis is
The cross axis
This is the other direction from that set by
row your cross axis is
Main-start and main-end
The start and end of the main axis.
Cross-start and cross-end
The start and end of the cross axis.
Note that other than
flex-end, which are specific to flexbox, these values can be used in any formatting context that supports alignment, for example, CSS Grid Layout.
flex-start and flex-end compared to start and end
In the following example, there is a flex container (the alignment container), with two flex items (the alignment subjects) inside. The initial
Using the select boxes, try out the different values for
flex-direction: row it appears that
start do the same thing, likewise for
row-reverse however, and you can see the difference. When using
row-reverse the main-start and main-end have been switched. The main-start is now on the right, and main-end on the left. This has not changed the text direction, however, which still runs left to right.
Now try the various values of
justify-content. You will find that
flex-end moves the items to the left—the main-end of the flex container. Use
end and the items move to the right, this being the flow-relative end of the container.
Try the demo using
direction: rtl on the container to see how changing the text direction changes how these values work.
Therefore, if you want the item to align with the end as defined by
flex-end. To align it with the end of the alignment container, use
self-start and self-end compared to start and end
In the previous example, you saw that
end are flow relative, and relate to the writing mode and script direction. The
self-end values are also flow-relative but they relate to the writing mode and direction of the alignment subject, in this case a flex item.
To see how this works, take a look at the following demo. There are three flex items in the container which has a
column. The cross-axis is therefore along the row. The second item has
align-items: start, the items all line up on the left, as the container has a left to right direction. However, change that to
align-items: self-start, and item number two aligns to the end of the flex container—its flow relative start.
Therefore, if you want the item to respect the direction or writing mode of the alignment container, use
end. To respect the writing mode or direction of the alignment subject, use
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.