03.12.2021

Макет CSS Flexbox против макета CSS Grid

Макет CSS Flexbox против  макета CSS Grid

От создателя: Flexbox и Grid — это две модели макета CSS, которые можно использовать для сотворения сложных макетов веб-приложений с помощью всего только пары правил CSS. Это руководство поможет вам осознать различия между моделями макетов CSS Flexbox и Grid и посоветует, когда использовать одну вместо другой.

Мы начнем с исследования того, как работает модель макета Flexbox, а потом рассмотрим, как работает Grid.

Как работает макет CSS Flexbox

Модель макета Flexbox (либо Flexible Box) — это одномерная модель макета CSS, которая позволяет создавать адаптивные макеты для вашего веб-приложения.

Главный особенностью модели Flexbox является то, что она автоматом регулирует макет вашей веб-страницы в зависимости от размера вашего контента. Вам необходимо только определить направление и поведение обертки в Flexbox с помощью параметров flex-direction и flex-wrap.

Упругость модели Flexbox позволяет распределять неиспользуемое место между элементами, которые выровнены по вертикали либо горизонтали.

Давайте посмотрим на пример модели Flexbox в действии. Во-1-х, предположим, что у вас есть контейнер div с пятью дочерними элементами, как показано ниже:

Интегрированный тег style используется, чтобы помочь вам верно видеть элементы. В настоящее время элементы показываются следующим образом:

Макет CSS Flexbox против  макета CSS Grid

Чтоб включить макет flexbox, вам необходимо добавить свойство CSS display:flex к элементу container последующим образом:

CSS

С помощью приведенного выше CSS все дочерние элементы элемента container будут использовать поведение flex для собственного отображения. Свойство gap добавляет пробел меж строками и столбцами.

В том же элементе container вы сможете определить свойство flex-direction для управления направлением содержимого:

CSS

Свойство flex-direction:row располагает содержимое по горизонтали, в то время как flex-direction:column располагает содержимое вертикально. Теперь ваш макет HTML должен смотреться так:

Макет CSS Flexbox против  макета CSS Grid

Свойство flex-wrap определяет поведение обертки содержимого, размещенного по горизонтали. Со свойством flex-wrap ваш контент будет перенесен на последующую строку, когда размер экрана станет очень маленьким, чтобы содержать все дочерние элементы в одной строке:

CSS

Давайте настроим содержимое HTML-страницы и добавим более длиннющий текст для первого элемента:

Посмотрите на следующий пример и обратите внимание, как Flexbox сделал вторую строку, когда вы уменьшили размер браузера:

Макет CSS Flexbox против  макета CSS Grid

Модель Flexbox позволяет расширять элементы, чтоб заполнить доступное пространство строки, используя свойство flex-grow.

CSS

Добавив свойство flex-grow в класс item, вы обнаружите, что элементы 2-ой строки расширяются и заполняют доступное место строки по мере уменьшения ширины браузера. Обратите внимание, что 2-ой столбец намного меньше, чем остальные столбцы:

Макет CSS Flexbox против  макета CSS Grid

Сейчас, когда вы узнали, как работает макет Flexbox, давайте продолжим исследование того, как работает макет CSS Grid.

Как работает макет CSS Grid

Макет CSS Grid позволяет создавать двухмерную модель макета, состоящую из строк и столбцов. Он позволяет сделать гораздо более жесткий макет для вашей интернет-страницы, который не меняется в зависимости от размера содержимого. Чтоб помочь вам понять разницу между макетами CSS Flexbox и CSS Grid, давайте воспользуемся тем же примером, приведенным выше, где у вас есть один элемент контейнера с пятью дочерними элементами.

Как вы уже лицезрели, модель Flexbox позволяет вашему контенту заполнять макет интернет-страницы. Если один из ваших элементов имеет больший размер, весь макет будет гибким, чтоб соответствовать разным размерам дочерних элементов.

Но что, если вам нужен строго определенный макет, в котором любая строка имеет три столбца независимо от размера элемента?

Модель Flexbox не имеет параметров, позволяющих строго контролировать расположение элементов. Чтоб создать строку с тремя столбцами, вам необходимо самостоятельно вычислить значение width каждого дочерного элемента. Так как промежуток между каждым элементом 20px, давайте рассчитаем ширину для каждого элемента item, как показано ниже:

CSS

Сейчас у вас должен получиться макет из 3-х столбцов, как показано ниже:

Макет CSS Flexbox против  макета CSS Grid

Приведенные выше дочерние элементы на самом деле не заполняют всю ширину строчки, потому что с правой стороны все еще есть свободное место.

Но если вы добавите свойство flex-grow:1 к классу item, то два элемента во 2-ой строке расширятся, чтобы заполнить пространство, нарушив трехколоночный макет.

Тут на помощь приходит макет Grid. Возможность управлять размещением частей в двумерном макете помогает точно найти, как должна выглядеть ваша веб-страница. Поглядите на следующий CSS:

CSS

Сейчас ваши элементы всегда будут отображаться в макете из 3-х столбцов, даже если в строке всего 2 элемента:

Макет CSS Flexbox против  макета CSS Grid

Макет Grid более жесткий и не позволяет расширяющемуся поведению характеристики flex-grow заполнять доступное пространство строки.

Когда использовать макет Flexbox либо Grid для вашего веб-приложения

Сейчас, когда вы узнали, как работают модели Flexbox и Grid, пора выяснить, когда использовать ту или иную модель для вашего веб-проекта.

Основное различие меж макетами Flexbox и Grid заключается в том, что Flexbox делает дизайн с приоритетом содержимого, а Grid делает дизайн с ориентацией на макет.

Модель Flex просматривает ваш контент, а потом пытается настроить макет, чтобы он лучше соответствовал всему контенту на экране, тогда как модель Grid обеспечивает более серьезный контроль над макетом, игнорируя размер вашего контента.

Но заместо того, чтобы думать о них как о конкурирующих разработках, вы можете думать о макетах Flexbox и Grid как о дополнительных разработках, которые можно использовать вместе для сотворения сложной компоновки веб-приложения.

Вы сможете использовать Grid для определения следующего макета:

Макет CSS Flexbox против  макета CSS Grid

Со последующей разметкой HTML:

Cтили CSS:

CSS

Потом вы можете использовать макет Flexbox для выравнивания частей внутри каждого из этих контейнерных частей. Один из распространенных примеров использования модели Flexbox — это выравнивание частей <nav> следующим образом:

Потом вам нужно стилизовать указанные выше элементы:

CSS

Итог будет следующим:

Макет CSS Flexbox против  макета CSS Grid

Это то, что имеют в виду разработчики, когда молвят, что Grid используется для создания всего контура странички, а Flexbox используется для деталей.

Когда у вас есть свободный макет, который приспосабливается к размеру вашего контента, рекомендуется использовать Flexbox. Но когда у вас есть фиксированный макет странички, лучше использовать модель Grid.

Заключение

Макет Flexbox позволяет вам создавать одномерный макет, в котором вы сможете легко увеличивать или уменьшать размеры частей в зависимости от доступного пространства, но трудно определить строго трехколоночный макет, используя эту модель.

Макет Grid позволяет вам управлять размещением ваших частей в двухмерном макете, но трудно расширить два столбца, чтоб заполнить пространство трехколоночного макета, как разъяснялось ранее.

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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *