В чём разница между 'start' и 'flex-start'?

Question

[ЛС]

Объясните, пожалуйста разницу между:
align-items: start; и align-items: flex-start;
Самостоятельно не могу подобраться.

Comments

[Антон Литвиненко]

Так нет такого значения start

[ЛС]

Антон Литвиненко, вот и я думаю, что нет, но Emmet в VS Code предлагает установить значение start для align-items.
А самое интересное то, что это работает. Даже префиксы создаются

-webkit-box-align: start;
    -ms-flex-align: start;

[Ярослав Иванов]

ЛС, https://developer.mozilla.org/ru/docs/Learn/CSS/CS... лучше ориентироваться на документацию чем на ошибку плагина.

align-items контролирует, где на поперечной оси находятся flex элементы.

• По умолчанию стоит значение stretch, которое растягивает все flex элементы, чтобы заполнить родителя вдоль поперечной (cross axis) оси. Если у родителя нет фиксированной ширины вдоль поперечной оси, все flex элементы примут длину самого длинного flex элемента. Вот почему наш первый пример по умолчанию получил столбцы с одинаковой высотой.
  
• Значение center , которое мы использовали в коде вверху, заставляет элементы сохранять свои собственные размеры, но центрирует их вдоль поперечной оси. Вот почему кнопки текущего примера центрированы по вертикали.
  
• Также есть значения flex-start и flex-end, которые выравнивают все элементы по началу и концу поперечной оси соответственно. См. подробнее align-items.
  

[Антон Литвиненко]

ЛС, так бы и написали. Я не интересовался, но думается, что для значений с префиксами наоборот, нету flex-start. Нюансы. Само свойство ведь тоже не так пишется

[Антон Литвиненко]

ЛС, только что нашёл информацию, что для флексов тоже можно использовать значения start и end

Answer 1

[profesor08]

Для элемента с display: flex используется align-items: flex-start, при этом все элементы будут сбиваться к верху своего контейнера.

Для элемента с display: grid используется align-items: start, тут элементы будут прибиваться к верху своей ячейки.

Comments

[ЛС]

Вот это более похоже на правду. Спасибо.

Answer 2

[Alex]

лучше ориентироваться на документацию

https://developer.mozilla.org/en-US/docs/Web/CSS/a...

https://stackoverflow.com/a/50919533/4543826