Grid — для макета, Flexbox — для компонентов

Grid - для макета, Flexbox - для компонентов

От создателя: мой брат — новичок в области компьютерной инженерии, и в истинное время он кончает свою стажировку по фронт-энд разработке. Он исследовал как CSS-Grid, так и Flexbox, но столкнулся с ситуацией, которую я нередко вижу. Он не может решить, когда употреблять Grid, а когда Flexbox. К примеру, он употреблял CSS-Grid для разметки заголовка сайта и отметил, что процесс не был гладким, когда он работал с grid-column.

Я также начал поиски ресурса, который он мог бы употреблять для исследования различий меж grid и flexbox, с примерами для обоих, но я не сумел его отыскать. Я решил написать углубленную статью, которая обхватывает все на данную тему. Я надеюсь, что для вас это также поможет!

Введение

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

Разница меж Grid и Flexbox

Разрешите мне прояснить, нет тривиального метода избрать меж сетью CSS и flexbox. Не считая того, нет правильного либо неверного метода их использования. Эта статья является собственного рода управлением, которое советует употреблять технику для определенного варианта. Я объясню общую теорию, а потом перейду к примерам, а остальное зависит от вас.

CSS

1234567891011/* Flexbox wrapper */.wrapper {    display: flex;} /* Grid wrapper */.wrapper {    display: grid;    grid-template-columns: 2fr 1fr;    grid-gap: 16px;}

Grid - для макета, Flexbox - для компонентов

Вы что-то увидели? Flexbox выкладывает интегрированный перечень частей, а Сетка делает из них сетку столбцов и строк. Flexbox сглаживает их в ряд. Это быть может столбец, если мы захотим.

CSS

12345/* Flexbox wrapper */.wrapper {    display: flex;    flex-direction: column;}

Grid - для макета, Flexbox - для компонентов

Как решить, что употреблять

Выбор меж Сетью CSS и flexbox быть может мало сложным (время от времени), в особенности если вы новичок в CSS. Вот несколько исходных вопросцев, которые я задаю для себя, выбирая меж ними:

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

Как компонент должен работать на экранах различных размеров?

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

Grid - для макета, Flexbox - для компонентов

Но, если вы видите столбцы и строчки, то Сетка — это решение для вашего варианта.

Grid - для макета, Flexbox - для компонентов

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

Примеры использования

В последующем разделе я тщательно расскажу о разных вариантах использования для flexbox и grid.

CSS Grid

Главный контент и боковая панель

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

Grid - для макета, Flexbox - для компонентов

Ах так я мог бы создать это в CSS:

1234<div class=”wrapper”>    <aside>Sidebar</aside>    <main>Main</main></div>

CSS

1234567891011@media (min-width: 800px) {    .wrapper {        display: grid;        grid-template-columns: 200px 1fr;        grid-gap: 16px;    }        aside {        align-self: start;    }}

Если для элемента <aside> не задано align-self, его высота будет равна основному контенту, независимо от длины содержимого.

Сетка карточек

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

Grid - для макета, Flexbox - для компонентов

Ах так я мог бы воплотить этот макет:

CSS

12345.wrapper {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));    grid-gap: 16px;}

Ширина столбца будет по последней мере 200px, и если места недостаточно, он перенесет карточки в новейшую строчку. Необходимо отметить, что приведенное выше может вызвать добавление горизонтальной полосы прокрутки, если ширина области просмотра меньше 200px.

READ
Падение объемов органического вызвал еженедельный апдейт Google?

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

CSS

1234567@media (min-width: 800px) {    .wrapper {        display: grid;        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));        grid-gap: 16px;    }}

Макет раздела

В последующем дизайне мы можем употреблять сетку два раза, 1-ый раз — поделить область на две части (боковая панель «Свяжитесь с нами» и форма), а 2-ой — для сетки самой формы.

Grid - для макета, Flexbox - для компонентов

CSS-сетка совершенно подступает для этого. Ах так это создать:

CSS

1234567891011121314151617@media (min-width: 800px) {    .wrapper {        display: grid;        grid-template-columns: 200px 1fr;    }        .form-wrapper {        display: grid;        grid-template-columns: 1fr 1fr;        grid-gap: 16px;    }        .form-message,    .form-button {        grid-column: 1 / 3; /* let them take the full width */    }}

CSS Flexbox

В 90% случаев навигация по веб-сайту обязана создаваться при помощи CSS flexbox. Самый всераспространенный шаблон — это логотип слева и меню навигации справа. Это совершенно подступает для flexbox.

Grid - для макета, Flexbox - для компонентов

В приведенном выше примере все, что для вас необходимо установить, это:

CSS

12345.site-header {    display: flex;    flex-wrap: wrap;    justify-content: space-between;}

Та же теория может работать и в последующем дизайне.

Grid - для макета, Flexbox - для компонентов

Направьте внимание, что структура меню навигации мало различается, но интервал меж элементами все еще соблюдается при помощи характеристики justify-content.

Перечень действий

Когда вы слышите про перечень, 1-ое, о чем вы сможете помыслить — это вертикальный перечень. Тем не наименее, перечень может отображаться в строке, я просто желал убедиться, что это понятно.

Пример перечня действий — это то, что мы можем созидать на Facebook либо Twitter. Перечень действий состоит из клавиш действий, которые может делать юзер. Смотрите снимки экрана ниже:

Grid - для макета, Flexbox - для компонентов

Видите ли, элементы показываются рядом вместе, и они размещены горизонтально. Flexbox совершенно подступает для этого! Это одно из главных применений.

CSS

1234567.actions-list {    display: flex;} .actions-list__item {    flex: 1; /* расширяем элементы, чтоб они умеренно распределялись в доступном пространстве */}

Иной вариант этого — модальная клавиша деяния либо модальный заголовок.

Grid - для макета, Flexbox - для компонентов

И модальный заголовка и модальный футер имеют дочерние элементы, которые показываются встроенными. Расстояние меж ними задано так, как показано ниже. Для модального заголовка это смотрится так:

CSS

1234.modal-header {    display: flex;    justify-content: space-between;}

Для футера, это мало по-другому. Действие «Отмена» употребляет автоматическое поле для сдвига на право.

CSS

123.cancel__action {    margin-left: auto;}

Имя .cancel__action быть может не безупречным, но я не желаю на данный момент вдаваться в соглашения о именах CSS.

Элементы формы

Композиция поля ввода с клавишей рядом с ним — безупречный вариант использования Flexbox. Поглядите на набросок ниже:

Grid - для макета, Flexbox - для компонентов

В первой форме элемент ввода занимает все доступное место, что делает его динамическим. То же самое относится ко 2-ой форме (Facebook messenger), текстовое поле занимает все доступное пространство. Давайте внимательнее поглядим на него.

Grid - для макета, Flexbox - для компонентов

CSS

1.input { flex: 1 1 auto; }

Направьте внимание, что без использования для текстового поля flex: 1 1 auto оно не будет расширяться и заполнять оставшееся место.

Темы и комменты

Иным всераспространенным вариантом использования flexbox являются темы объяснений. Разглядим последующий пример.

Grid - для макета, Flexbox - для компонентов

У нас есть фото юзера и сам комментарий. Комментарий занимает оставшееся пространство в родительском элементе. Это безупречное пространство для использования flexbox.

Составляющие карточки

Компонент карточки имеет много вариантов, но более всераспространенный дизайн — это что-то вроде макета ниже.

Grid - для макета, Flexbox - для компонентов

Слева дочерние элементы карты размещены друг над другом, поэтому что направление flex-контейнера — column. А справа — напротив. Применяемое направление — row, и имейте в виду, что row — это направление по дефлоту для flexbox.

CSS

12345678910.card {    display: flex;    flex-direction: column;} @media (min-width: 800px) {    .card {        flex-direction: row;    }}

Еще одна всераспространенная разновидность карточки — иконка с текстовой меткой под ней. Это быть может клавиша, ссылка либо просто декоративный элемент. Разглядим последующий макет:

Grid - для макета, Flexbox - для компонентов

Направьте внимание, как иконка и текстовая метка центрированы по горизонтали и вертикали. Благодаря flexbox это просто создать.

CSS

12345.card {    display: flex;    flex-direction: column;    align-items: center;}
READ
Как создать формы загрузки файлов на сайте WordPress

Интегрированный стиль применяется по дефлоту, нам просто необходимо удалить flex-direction: column и бросить значение по дефлоту (row).

Вкладки / нижние меню

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

Grid - для макета, Flexbox - для компонентов

В приведенном выше примере любой элемент должен заполнить доступное место, и они должны быть равны по ширине. Установив для характеристики display контейнера flex, мы можем просто это создать.

CSS

123.tabs__item {    flex-grow: 1;}

Этот способ употребляется в среде React Native для сотворения панели вкладок для мобильных приложений. Вот вам наглядный пример кода, который делает то же самое, что и в React Native. Код взят с этого ресурса.

JavaScript

123456789101112import React from ‘react’;import { View } from ‘react-native’; export default FlexDirectionBasics = () => {    return (      <View style=>        <View style= />        <View style= />        <View style= />      </View>    );};

Перечень функций

Что мне больше всего нравится во flexbox, так это возможность поменять направление частей. Направление flexbox по дефлоту — row, но мы можем поменять его, как показано ниже.

CSS

123.item {    flex-direction: row-reverse;}

В макете ниже направьте внимание, как чётный элемент переворачивается, это делается при помощи техники, описанной чуть повыше. Что весьма полезно.

Grid - для макета, Flexbox - для компонентов

Центрирование содержимого раздела

Давайте разглядим ситуацию, когда у нас есть hero-раздел, и контент должен быть центрирован по горизонтали и вертикали. Горизонтальное центрирование выполнить просто, так как это быть может изготовлено при помощи сглаживанием текста.

Grid - для макета, Flexbox - для компонентов

CSS

123.hero {    text-align: center;}

Но как употреблять flexbox для центрирования частей по вертикали? Вот что нам необходимо.

CSS

1234567.hero {    display: flex;    flex-direction: column;    align-items: center; /* centers items horizontally */    justify-content: center; /* centers items vertically */    text-align: center;}

Сочетание CSS Grid и Flexbox

Любой модуль макета не только лишь имеет свои варианты использования, но мы можем употреблять оба из их. Когда я думаю о их объединении, 1-ый вариант использования, который я мне приходит на разум, это перечень карточек. Сетка употребляется для размещения карточек, а flexbox — для самого компонента карточки.

Grid - для макета, Flexbox - для компонентов

Вот требования к макету:

Высота карточек для всякого ряда обязана быть равна

Ссылка read more обязана быть размещена в конце карточки, независимо от ее высоты.

Сетка обязана употреблять функцию minmax()

12345678910<div class=”wrapper”>    <article class=”card”>        <img src=”sunrise.jpg” alt=””>    <div class=”card__content”>      <h2><!– Title –></h2>      <p><!– Desc –></p>      <p class=”card_link”><a href=”#”>Read more</a></p>    </div>    </article></div>

CSS

12345678910111213141516171819202122@media (min-width: 500px) {    .wrapper {        display: grid;        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));        grid-gap: 16px;    }} .card {    display: flex; /* [1] */    flex-direction: column; /* [2] */} .card__content {    flex-grow: 1; /* [3] */    display: flex; /* [4] */    flex-direction: column;} .card__link {    margin-top: auto; /* [5] */}

Разрешите мне разъяснить CSS выше.

Делаем карточку контейнером flexbox.

Направление — column, что значит, что элементы карточки уложены один под иным.

Позволяем содержимому карточки расширяться и заполнять доступное место.

Делаем содержимое карточки контейнером flexbox.

В конце концов, используем margin-top: auto, чтоб сдвинуть ссылку вниз. Она будет располагаться в конце независимо от высоты карточки.

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

Запасный вариант и поддержка старенькых браузеров

Внедрение CSS @supports

Пару месяцев вспять я получил твит, в каком говорилось, что мой веб-сайт не работает в IE11. Опосля проверки я увидел весьма странноватое поведение. Весь контент веб-сайта свернут в верхнюю левую область. Мой веб-сайт не подходящ для использования!

Grid - для макета, Flexbox - для компонентов

Да, это мой веб-сайт — интерфейс веб-сайта для разрабов на IE11. Поначалу я был смущен, почему это происходит? Я вспомянул, что CSS-сетка поддерживается в IE11, но это древняя версия, выпущенная Microsoft. Решение весьма обычное — употреблять CSS-сетку лишь для новейших браузеров через @supports.

READ
Советы по оптимизации JavaScript и улучшению загрузки сайта

CSS

12345@supports (grid-area: auto) {    body {        display: grid;    }}

Разрешите мне разъяснить это. Я употреблял grid-area, поэтому что оно поддерживается лишь в новейшей спецификации сетки CSS, с марта 2017 года по нынешний денек. Так как IE не поддерживает запрос @supports, все правило будет игнорироваться. В итоге новенькая CSS-сетка будет употребляться лишь для поддерживающих браузеров.

Внедрение Flexbox в качестве запасного варианта для CSS-Сетки

Если flexbox не подступает для отображения сетки частей, это не означает, что он не подступает для отката. Вы сможете употреблять flexbox в качестве запасного варианта для CSS-сетки для не поддерживающих браузеров. Я разработал инструмент, который делает конкретно это.

CSS

12345678910111213141516171819202122232425262728293031323334353637383940414243@mixin grid() {  display: flex;  flex-wrap: wrap;   @supports (grid-area: auto) {    display: grid;    grid-gap: 16px 16px;  }} @mixin gridAuto() {  margin-left: -16px;   > * {    margin-bottom: 16px;    margin-left: 16px;  }   @media (min-width: 320px) {    > * {      width: calc((99% / #{2}) – 16px);      flex: 0 0 calc((99% / #{2}) – 16px);    }  }   @media (min-width: 768px) {    > * {      width: calc((99% / #{3}) – 16px);      flex: 0 0 calc((99% / #{3}) – 16px);    }  }   @supports (grid-area: auto) {    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));    margin-left: 0;     > * {      width: auto;      margin-left: 0;      margin-bottom: 0;    }  }}

Запасный код выше работает последующим образом:

Добавляем к элементу оболочки display: flex и flex-wrap: wrap.

Проверяем, поддерживается ли CSS-сетка, если да, то заместо этого будет употребляться display: grid.

Используя селектор > *, мы можем избрать прямые дочерние элементы контейнера. Выбрав их, мы можем добавить определенную ширину либо размер к любому.

Естественно, меж ними нужно поле, оно будет заменено grid-gap в случае поддержки CSS-сетки.

Вот вам наглядный пример того, как употреблять миксин Sass.

CSS

1234.wrapper {  @include grid();  @include gridAuto();}

Демонстрация

Когда не стоит употреблять ни Сетку, ни Flexbox

Когда я делал обзор кода для моего брата, я увидел несколько некорректных вариантов использования CSS-сетки либо flexbox и помыслил, что это быть может полезно, если я выделю некие из их.

Внедрение CSS Grid для заголовка веб-сайта

Одним из мотивов для написания данной статьи была эта ошибка. Я увидел, что мой брат употребляет CSS-сетку для реализации заголовка веб-сайта.

Он упомянул такие вещи, как «это было трудно, CSS сетка сложна и т. д.». В итоге использования неверного способа верстки он сделал вывод, что CSS-сетка сложна. Это не так, и все его заблуждение вышло из-за того, что он употреблял ее для неподходящих вещей. Разглядим последующий пример, который я отыскал.

Grid - для макета, Flexbox - для компонентов

CSS

123456789.site-header {    display: grid;    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;} .site-nav {    display: grid;    grid-template-columns: 1fr 1fr 1fr 1fr;}

CSS-сетка использовалась два раза, 1-ый раз для всего заголовка, а 2-ой — для меню навигации. Он употреблял grid-column для четкой опции расстояния меж элементами и остальных странноватых вещей, которые я не могу вспомянуть, но вы сообразили идею!

Внедрение CSS Grid для вкладок

Очередное неверное внедрение CSS-сетки — это применение к компоненту вкладок. Разглядим последующий макет.

Grid - для макета, Flexbox - для компонентов

Неверный код CSS смотрится так:

CSS

1234.tabs-wrapper {    display: grid;    grid-template-columns: 1fr 1fr 1fr;}

Из приведенного выше кода видно, что разраб представил, что количество вкладок равно трем. В итоге он употребляли 1fr 1fr 1fr для раскладки колонок. Это может просто сломаться, если количество столбцов поменялось.

Ненадобное внедрение Flexbox либо Grid

Помните, что старенькый способ макета быть может безупречным для вашего варианта. Ненадобное внедрение flexbox либо сетки может с течением времени усложнить ваш CSS. Я не имею в виду, что они сложны, но еще лучше употреблять их верно и в правильном контексте, как объяснено в примерах данной статьи.

К примеру, у вас есть последующий hero-раздел с необходимостью горизонтально центрировать все содержимое.

Grid - для макета, Flexbox - для компонентов

Это можно создать при помощи text-align: center. Для чего употреблять flexbox, когда есть наиболее обычное решение?

Заключение

Фу, это было много всего о различиях меж внедрением CSS Grid и Flexbox. Данная тема была задумана длительное время, и я рад, что мне выпал шанс написать о этом.

Создатель: Ahmad Shadeed

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий