Конечно, вы правы.В этом ограниченном тестовом примере результат визуально идентичен.Оба позволяют легко реализовать (и, что не менее важно, предсказуемые и предсказуемо- разнесенные ) макеты.Но существуют значительные различия между применимостью одного подхода к другому.Возможно, больше, чем вы хотите, но ...
Один против двух измерений
Основное различие между css flexbox (или модулем гибкой компоновки блоков)) спецификацией и спецификацией css grid является то, что первое (flexbox) является одномерным, а второе (grid) является двумерным.
Другими словами, flexbox предназначен для упрощения размещения элементов в одном направлении: по горизонтали (в строке) или по вертикали (в столбце).
grid,с другой стороны, допускает макеты, которые требуют (или могут извлечь выгоду) как горизонтальную , так и вертикальную спецификацию: строки и столбцы.
Content-first против Layout-first
На Харальда Боргена предполагает , что еще одно ключевое отличие между ними заключается в том, что flexbox являетсяспецификация содержимого в первую очередь, в то время как grid - спецификация макетаДругими словами, flexbox не требует большого предварительного определения макета, чтобы сделать свое дело.Наденьте правило dispay: flex на своего гибкого родителя, и flexbox решит, как все устроить (конечно, в предсказуемой, вменяемой манере).Да, результаты можно настраивать, добавляя различные свойства, но flexbox делает большую работу за вас.Размещение содержимого жидкость .
grid немного отличается в этом отношении.Как правило, вам нужно определить свою, ну, сетку, когда вы впервые реализуете свой макет.Сколько столбцов вам нужно?Вы должны сообщить grid.Какой контент должен идти в какой макет "ячейка"?grid забот.flexbox с другой стороны, поскольку он заботится только об одном измерении, он может занять больше свободы с интервалом и размещением контента.С grid размещение контента фиксированное .
Рейчел Эндрю, эксперт по сетке, если когда-либо был, делает подобное различие, но помечает его:
Работа с контентом [flexbox] и работа с определением сетки в [grid]
Поддержка браузера
ДругойСущественная разница (по крайней мере, так как это написано в начале 2019 года) заключается в том, что поддержка браузером flexbox (особенно с добавлением autoprefixer к процессу сборки интерфейса) превосходна (поддержка обратно в IE11)[или даже IE10] - довольно тривиальная задача, хотя эти браузеры реализуют более старые, «твинерские» синтаксисы, которые сейчас устарели).
С другой стороны, хотя поддержка браузером grid не что иное, как чертовски хорошо , поддержка макета сетки обратно в IE11 (если это важно для вас) может быть немногодля чего-то другого, кроме простых сценариев (см. отличную статью Рэйчел Эндрю ).Что касается IE10, не беспокойтесь.По этой причине некоторые разработчики будут «взламывать» flexbox для выполнения макетов, которые, вероятно, лучше обслуживать с использованием спецификации grid.Здесь нет суждения.
Тангенс
( Bootstrap 4 , например, является чем-то вроде барометра того, что в настоящее время кросс-браузерно совместимо с IE10: особенно, он реализует flex -компактную систему компоновки (хотя и ссылается на необходимость префикса для конкретного поставщика), но не реализует grid. Это не означает, что grid не хватает широкой поддержки - каккак отмечалось выше, поддержка хорошая - ни один из этих факторов не должен препятствовать реализации макета с питанием grid; это просто интересная точка данных.)
Итак, вернемся кВаш вопрос: какая разница?Визуально ничего нет (в данном конкретном случае).Стратегически, совсем немного.
Удобная статья от Рейчел Эндрю для различения вариантов использования: https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/