Flexbox и CSS-сетка - это две разные функции, и я не согласен с тем, чтобы сказать, что один может заменить другой, или что CSS-сетка - это расширенный набор flexbox.
Вы сказали:
Я не нашел четкого объяснения, почему нельзя использовать Grid для 1-D и заменить Flexbox.
Вот базовый пример flexbox, который включает в себя обертывание, которого вы не можете достичь (или, вероятно, труднодобиться) с помощью CSS сетки.Уменьшите размер окна и посмотрите, как будут вести себя элементы.
.box {
display: flex;
flex-wrap: wrap;
}
.box>span {
border: 1px solid;
padding: 10px;
flex-grow: 1;
}
<div class="box">
<span>some text very long here some text very long here </span>
<span>text here</span>
<span>A</span>
<span>B</span>
</div>
Это 1-D макет, где каждая строка может иметь размеры элементов по-разному, в зависимости от свободного пространства, без нахождения в 2-D сетке.Будет сложно добиться того же результата с использованием CSS-сетки.
В основном flexbox больше подходит, когда речь идет о многострочном / многострочном контенте в одном направлении, тогда как CSS-сетка больше относится к сетке.с строкой и столбцами .Конечно, когда речь идет только об одной строке, 2D-сетка может рассматриваться как 1D, поэтому flexbox и CSS-сетка могут достичь одного и того же.
Это похоже на сравнение таблицы только с одной tr и несколькими td с набором inline-block элементов внутри одной строки, НО, когда дело доходит до переноса, и несколькими tr ясно, что таблица и inline-block различны.
Стоит отметить, что вы можете достичьчто вы хотите, используя любые методы в целом.В прошлом Flexbox не было, и разработчики могли создавать макеты, используя float (Boostrap - лучший пример).Тогда Flexbox поставляется с более мощными функциями, чтобы сделать вещи проще.То же самое для CSS-сетки и для будущих функций.
Вот пример: https://drafts.csswg.org/css-align-3/
Этот проект говорит о будущем улучшении выравнивания, где мы можем рассмотреть jutify-content, align-items и т. д. даже без использования flexbox или CSS-сетки, а непосредственно с элементами блока.
Если это будет реализовано, сделает ли это Flexbox и CSS Grid бесполезными?Я так не думаю.