Знакомство с Flexbox Grid в Foundation 6

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

Краткий обзор преимуществ Flexbox:

  • Колонки автоматически меняют размер а зависимости от ширины контейнера.
  • Выравнивание left, middle, right, и justified
  • Выравнивание по вертикали!
  • Отображение элементов в любом порядке и направлении.

Лучшая часть Flexbox - Вы добавляете столбцы и они автоматически подгоняются по размеру родительского элемента. Больше не нужно объявлять ширину в 33.3%, либо другим случайным числом.

Foundation 6 и Flexbox Grid

В Foundation 6 добавили новую сетку Flexbox Grid, чтобы упростить создание адаптивных шаблонов.

В Foundation 5, сетка выглядела следующим образом:

<div class="row">
<div class="small-4 columns">one-third</div>
<div class="small-4 columns">one-third</div>
<div class="small-4 columns">one-third</div>
</div>

See the Pen Foundation 5 Basic Grid Showcase by Chris Sevilleja (@sevilayha) on CodePen.

Если бы мы хотели добавить еще один столбец, нам бы пришлось сменить классы small-4 на small-3.

Было бы здорово, если бы мы могли просто добавить столбец и он автоматически станет нужной ширины. Благодаря Foundation 6 и Flexbox Grid мы можем создать сетку следующим образом:

<div class="row">
<div class="columns">one-third</div>
<div class="columns">one-third</div>
<div class="columns">one-third</div>
</div>

Начало работы

По умолчанию Foundation 6, поставляется со стандартной сеткой (не Flexbox).

Для использования Flexbox Grid в Foundation 6, вы должны указать её при загрузке Foundation 6(рис.ниже), либо добавить свойство @imported в SASS.

Подключение в SASS:

@import 'foundation';

// @include foundation-grid;
@include foundation-flex-grid;

Основная сетка

Взгляните на следующий пример создания сетки из трех столбцов:

<div class="row">
<div class="columns">one-third</div>
<div class="columns">one-third</div>
<div class="columns">one-third</div>
</div>

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

Для первого столбца зададим половину ширины родительского элемента используя small-6, а остальные два займут 1/4.

<div class="row text-center">
<div class="small-6 columns">one half</div>
<div class="columns">one quarter</div>
<div class="columns">one quarter</div>
</div>

See the Pen Foundation 6 Flexbox - Basics by Chris Sevilleja (@sevilayha) on CodePen.

Масштабирование по размеру контента

Если вы хотите чтобы столбец был размером с контент, используйте класс shrink:

<div class="row text-center">
<div class="small-6 columns">one half</div>
<div class="columns">one quarter</div>
<div class="shrink columns">one quarter</div>
</div>

See the Pen Foundation 6 Flexbox - Shrink by Chris Sevilleja (@sevilayha) on CodePen.

Укладка

Flexbox имеет много способов укладки контента, работая с разными размерами устройств. Как и в оригинальной сетке, вы можете использовать классы small-*, medium-*, и large-*.

Если у столбцов не будет явно указан размер, он просто расположит по их количеству.

<p class="text-center">No Stacking</p>
<div class="row text-center">
<div class="columns">space</div>
<div class="columns">space</div>
<div class="columns">space</div>
<div class="columns">space</div>
</div>

See the Pen Foundation 6 Flexbox - Shrink by Chris Sevilleja (@sevilayha) on CodePen.

Также можно задать размеры столбцов для других устройств:

<p class="text-center">Stacks on Small</p>
<div class="row text-center">
<div class="small-12 medium-3 columns">space</div>
<div class="small-12 medium-3 columns">space</div>
<div class="small-12 medium-3 columns">space</div>
<div class="small-12 medium-3 columns">space</div>
</div>

See the Pen Foundation 6 Flexbox - Stack by Chris Sevilleja (@sevilayha) on CodePen.

Еще один способ определения столбцов - medium-expand и large-expand. Столбцы будут просто расширяться занимая свободное пространство на экране.

<p class="text-center">Stacks on Small</p>
<div class="row text-center">
<div class="small-12 medium-expand columns">space</div>
<div class="small-12 medium-expand columns">space</div>
<div class="small-12 medium-expand columns">space</div>
<div class="small-12 medium-expand columns">space</div>
</div>

See the Pen Foundation 6 Flexbox - Stack by Chris Sevilleja (@sevilayha) on CodePen.

Выравнивание

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

Вы можете добавить один из следующий классов для row:

  • align-right
  • align-center
  • align-justify
  • align-spaced
<p class="text-center">Aligned Center</p>
<div class="row align-center text-center">
    <div class="columns small-3">space</div>
    <div class="columns small-3">space</div>
    <div class="columns small-3">space</div>
</div>

See the Pen Foundation 6 Flexbox - Alignment by Chris Sevilleja (@sevilayha) on CodePen.

Выравнивание по вертикали

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

Используйте один из следующих классов для элементов row, columns или div, для вертикального выравнивания.

  • align-top
  • align-middle
  • align-bottom
  • align-stretch

Помните, для горизонтального выравнивания используем align-center, а для вертикального align-middle.

<div class="row align-middle text-center">
    <div class="columns">space</div>
    <div class="columns">
      <p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
    </div>
</div>

See the Pen Foundation 6 Flexbox - Alignment by Chris Sevilleja (@sevilayha) on CodePen.

Отступы

Foundation flexbox как и стандартные сетки, позволяет создавать пропуски колонок, в зависимости от размера экрана:

<div class="row">
  <div class="column order-1 medium-order-2">
    This column will come first on small, and second on medium and larger.
  </div>
  <div class="column order-2 medium-order-1">
    This column will come second on small, and first on medium and larger.
  </div>
</div>    

Заключение

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

Если у вас возникли каки-либо вопросы, можете задать их в комментариях ниже, либо пишите мне в Twitter

Перевод статьи Get to Know the Flexbox Grid in Foundation 6 (+ Win a Fitbit Flex)

Тэги: Frameworkfoundationflexboxsass

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.