css - Какие области Flexbox трудно или невозможно достичь с помощью Grid?




css-grid (2)

Преимущество Flexbox

Вот 9 областей, где flexbox выходит впереди Grid (уровень 1) :

  1. Центрирование обернутых предметов. Представьте себе пять гибких предметов. Только четыре в ряду. Пятый оборачивает. Этот пятый может быть легко выровнен по всему ряду с помощью justify-content . Попробуйте центрировать этот пятый элемент в сетке контейнера. Не простой вопрос.

    Выравнивание элементов сетки по всей строке / столбцу (как в случае с гибкими элементами)

    Как центрировать элементы в последнем ряду в CSS Grid?

  1. Упаковка. Гибкие элементы переменной длины не имеют проблем с переносом. Попробуйте получить элементы сетки переменной длины для переноса. Невозможно.

    Как получить элементы сетки разной длины для упаковки?

  1. Авто наценки. Гибкие элементы могут быть размещены, упакованы и разнесены по всему контейнеру с auto полями. Тем не менее, элементы сетки ограничены их дорожками, что значительно снижает полезность auto полей.

    Могут ли автоматические поля работать в CSS Grid, как во Flexbox?

  1. Мин, Макс, По умолчанию - все в одном. Задать min-width , max-width и width по умолчанию для гибкого элемента очень просто. Как можно установить все три длины в столбце или строке сетки? Они не могут.

    Установка минимальной, максимальной и длины по умолчанию столбца / строки сетки

  1. Липкий нижний колонтитул / заголовок. Намного проще и проще прикрепить нижний колонтитул или заголовок с помощью flexbox.

    Как получить липкий нижний колонтитул с моим макетом CSS Grid?

  1. Занимая оставшееся пространство. Flex-элемент может занимать оставшееся пространство с помощью flex-grow . Элементы сетки не имеют такой функции.

    Заставьте элемент сетки использовать оставшееся пространство, как элемент flex с flex-grow: 1

    Как сделать так, чтобы элементы в последнем ряду занимали оставшееся место в CSS Grid?

    Как сделать CSS Grid последней строкой, чтобы занять оставшееся место

  1. Уменьшая. Флекс имеет flex-shrink . Сетка не имеет ... ничего.

    Сжатие элементов сетки, как сгибать элементы в CSS

  1. Ограничение количества столбцов в динамическом макете. С помощью flexbox создание переносящей сетки из двух столбцов, которая остается фиксированной на двух столбцах для разных размеров экрана, не составляет проблем. В Grid, несмотря на наличие всех этих замечательных функций, таких как repeat() , auto-fill и minmax() , это невозможно сделать.

    Сделать CSS Grid автоматически заполнить только 2 столбца

    CSS столбцы макс столбцы без медиа-запросов

  1. Создание пространства между первым и последним элементами. В сетчатом контейнере с переменным числом столбцов нелегко добавить пустой первый и последний столбец. Поля, отступы, столбцы и псевдоэлементы имеют свои ограничения. Это просто и легко с flexbox.

    Добавьте пробел до и после первого и последнего элементов сетки

Общеизвестно, что Flexbox предназначен для 1-D, а Grid для 2-D, но я не нашел четкого объяснения, почему Grid нельзя использовать для 1-D и заменить Flexbox. Ближайший, к которому я пришел, это

Но вы также можете утверждать, что подобная схема 1D более эффективна во Flexbox, потому что Flexbox позволяет нам легче перемещать эти элементы (например, перемещать их все в одну или другую сторону, изменять их порядок, равномерно распределять их и т. Д.).

Я использую Grid и Flexbox для базового макета: общее расположение блоков на странице и некоторые динамические, обычно сложенные. Эстетические (тостеры, модалы, ...) управляются через структуру. Я еще не нашел случая, когда Grid не мог бы заменить Flexbox из коробки (то есть без продвинутой CSS-гимнастики или большого количества кода).

Чтобы взять пример приведенной выше цитаты, все упомянутые «ходы» непосредственно доступны в Grid, обычно с той же семантикой, что и во Flexbox.

Какие основные области, охватываемые Flexbox, трудно или невозможно управлять с помощью Grid?

РЕДАКТИРОВАТЬ: поддержка браузера не важна (я использую только вечнозеленые браузеры и могу переключаться при необходимости)

Flexbox и CSS grid - это две разные функции, и я не согласен с тем, чтобы сказать, что один может заменить другой или что CSS grid - это расширенный набор 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-сетка больше похожа на Grid со строками и столбцами . Конечно, когда речь идет только об одной строке, 2D-сетка может рассматриваться как 1D, поэтому flexbox и CSS-сетка могут достичь одного и того же.

Это похоже на сравнение таблицы только с одним tr и множественным td с набором элементов inline-block внутри одной строки, НО, когда дело доходит до переноса и множественного tr , ясно, что table и inline-block различны.

Стоит отметить, что вы можете достичь того, что вы хотите, используя любые методы в целом. В прошлом Flexbox не было, и разработчики могли создавать макеты с помощью float (Boostrap - лучший пример). Тогда Flexbox поставляется с более мощными функциями, чтобы сделать вещи проще. То же самое для CSS-сетки и для будущих функций.

Вот пример: https://drafts.csswg.org/css-align-3/

В этом проекте говорится о будущем улучшении выравнивания, в котором мы можем рассмотреть jutify-content , align-items и т. Д. Даже без использования flexbox или CSS-сетки, а непосредственно с блочными элементами.

Если это будет реализовано, сделает ли это Flexbox и CSS Grid бесполезными? Я так не думаю.




css   flexbox   css-grid  


css-grid