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