What's the difference between the alignment values of start, flex-start, and self-start?
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:
flex-startandflex-endstartandendself-startandself-end
The start, end, self-start and 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 row.
The cross axis
This is the other direction from that set by flex-direction. If flex-direction is row your cross axis is column.
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-start and 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 flex-direction is row.
See the Pen The difference between start and flex-start, end and flex-end (direction: ltr) by rachelandrew (@rachelandrew) on CodePen.
Using the select boxes, try out the different values for justify-content. With flex-direction: row it appears that flex-start and start do the same thing, likewise for flex-end and end.
Change flex-direction to 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.
See the Pen The difference between start and flex-start, end and flex-end (direction: ltr) by rachelandrew (@rachelandrew) on CodePen.
Therefore, if you want the item to align with the end as defined by flex-direction, use flex-end. To align it with the end of the alignment container, use end.
self-start and self-end compared to start and end
In the previous example, you saw that start and end are flow relative, and relate to the writing mode and script direction. The self-start and 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 flex-direction of column. The cross-axis is therefore along the row. The second item has direction: rtl.
With 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.
See the Pen by rachelandrew (@rachelandrew) on CodePen.
Therefore, if you want the item to respect the direction or writing mode of the alignment container, use start and end. To respect the writing mode or direction of the alignment subject, use self-start and self-end.
Sharing image by Debby Hudson on Unsplash.