Flexbox: flex-start, self-start, and start; What's the difference?
Solution 1
The values flex-end
and flex-start
(among others) were created for use with flex layout.
However, the W3C has been developing the Box Alignment Module, which establishes a common set of alignment properties and values for use across multiple box models, including flex, grid, table and block.
So what you're seeing are the newer values that will eventually replace the existing layout-specific values.
Here's how it's described in the flexbox specification:
The CSS Box Alignment Module extends and supercedes the definitions of the alignment properties (
justify-content
,align-items
,align-self
,align-content
) introduced here.
There's similar language in the Grid specification. Here's an example:
§ 10.1. Gutters: the
row-gap
,column-gap
, andgap
propertiesThe
row-gap
andcolumn-gap
properties (and theirgap
shorthand), when specified on a grid container, define the gutters between grid rows and grid columns. Their syntax is defined in CSS Box Alignment 3 §8 Gaps Between Boxes.
The original properties – grid-row-gap
, grid-column-gap
and grid-gap
– didn't last long. Although, for the sake of backward compatibility, I'm sure they're still respected.
Solution 2
flex-start
takes into account the presence of the -reverse
values of the flex direction, while start
does not.
For example, in a left-to-right writing mode with a flex container set to flex-direction:row-reverse
, justify-content:start
would cause all items to be justified to the left, while justify-content:flex-start
would cause all items to be justified to the right.
div {
padding: 4px;
border: 1px solid red
}
#div1 {
display: flex;
flex-direction: row-reverse;
justify-content: start
}
#div2 {
display: flex;
flex-direction: row-reverse;
justify-content: flex-start
}
<ul>
<li><code>align-content: start</code>
<div id=div1>
<div>Flex 1</div>
<div>Flex 2</div>
</div>
</li>
<br>
<li><code>align-content: flex-start</code>
<div id=div2>
<div>Flex 1</div>
<div>Flex 2</div>
</div>
</li>
</ul>
Edit on Jul 15 2019
The described different behaviour is true in Firefox browser (at least until 68), while in Chrome, as noted in comment by diachedelic, both properties work in the same way
![Vince](https://i.stack.imgur.com/enMF3.jpg?s=256&g=1)
Vince
Updated on June 06, 2022Comments
-
Vince about 2 years
I just noticed some values of the
align-self
property that I haven't seen before. What arestart
,end
,self-start
, andself-end
and what are their differences fromflex-start
andflex-end
?I've been referring to the guide at CSS-Tricks often when I work with flexbox, but it doesn't mention these values. I read the documentation for align-self at MDN, but the one-line description of the values isn't enough for me to understand.
I thought I might be able to play around with the values to figure it out, but they all seem to do the same thing...
.container { display: flex; justify-content: center; align-items: center; background: papayawhip; width: 400px; height: 200px; margin: 1rem auto; box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2); border-radius: 0.5em; } .block { color: white; font-size: 3em; font-family: sans-serif; padding: 0.5rem; margin: 0.5rem; display: flex; justify-content: center; align-items: center; } .block-1 { background: red; } .block-2 { background: orange; } .block-3 { background: gold; } .block-4 { background: green; } .block-5 { background: blue; } .block-2 { align-self: flex-start; } .block-3 { align-self: start; } .block-4 { align-self: self-start; }
<div class="container"> <div class="block block-1">1</div> <div class="block block-2">2</div> <div class="block block-3">3</div> <div class="block block-4">4</div> <div class="block block-5">5</div> </div>