Я просто заметил некоторые значения свойства align-self
, которых раньше не видел. Что такое start
, end
, self-start
и self-end
и чем они отличаются от flex-start
и flex-end
?
Когда я работаю с flexbox, я часто обращался к руководству в CSS-Tricks, но оно не упоминает эти значения. Я прочитал документацию по align-self в MDN, но однострочного описания значений мне недостаточно для понимания.
Я думал, что смогу поиграть со значениями, чтобы понять это, но все они, кажется, делают то же самое...
.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>