I just noticed some values of the align-self
property that I haven't seen before. What are start
, end
, self-start
, and self-end
and what are their differences from flex-start
and flex-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>
Best Answer
The values
flex-end
andflex-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:
There's similar language in the Grid specification. Here's an example:
The original properties –
grid-row-gap
,grid-column-gap
andgrid-gap
– didn't last long. Although, for the sake of backward compatibility, I'm sure they're still respected.