Flexbox: гибкий запуск, самозапуск и запуск; Какая разница?
Я только что заметил некоторые значения свойства align-self, которых раньше не видел. Что такое start, end, self-start и self-end и в чем их отличия от flex-start и flex-end?
Я часто ссылался на руководство по CSS-Tricks, когда работаю с 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>
Ответы 2
Значения flex-end и flex-start (среди прочего) были созданы для использования с гибкий макет.
Однако W3C разрабатывает Модуль выравнивания коробки, который устанавливает общий набор свойств и значений выравнивания для использования в нескольких блочных моделях, включая гибкость, сетку, таблицу и блок.
Итак, вы видите новые значения, которые в конечном итоге заменят существующие значения, специфичные для макета.
Вот как это описано в спецификации flexbox:
The CSS Box Alignment Module extends and supercedes the definitions of the alignment properties (
justify-content,align-items,align-self,align-content) introduced here.
Аналогичный язык есть в спецификации Grid. Вот пример:
§ 10.1. Gutters: the
row-gap,column-gap, andgappropertiesThe
row-gapandcolumn-gapproperties (and theirgapshorthand), 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.
Первоначальные свойства - grid-row-gap, grid-column-gap и grid-gap - просуществовали недолго. Хотя, ради обратной совместимости, я уверен, что они по-прежнему уважаются.
Мы увидим, как исходные свойства зазоров сетки сохранятся в подсеточной версии спецификации, над которой сейчас работают ...
flex-start учитывает наличие значений -reverse направления изгиба, а start - нет.
Например, в режиме записи слева направо с гибким контейнером, установленным на flex-direction:row-reverse, justify-content:start приведет к выравниванию всех элементов по левому краю, а justify-content:flex-start приведет к выравниванию всех элементов по правому краю.
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>Редактировать 15 июля 2019 г.
Описанное поведение разные верно в браузере Firefox (по крайней мере, до 68), тогда как в Chrome, как отмечено в комментарии диаходелический, оба свойства работают одинаково
Думаю, это поставило меня на правильный путь. Мне определенно нужно кое-что почитать. После того, как я разместил вопрос, я также нашел Выравнивание прямоугольника в CSS Grid Layout в MDN, который, как мне кажется, основан на документации, на которую вы ссылались.