Cеточная система Flex Grid Foundation


Новое в Foundation 6 - это сетка с основой от Flexbox, которую можно использовать вместо традиционной плавающей сетки.

Flex grid работает очень похоже на стандартную float grid, но включает в себя ряд полезных функций, доступных только с flexbox, таких как горизонтальное и вертикальное выравнивание, автоматическое определение размеров и более легкий порядок источников.

Поддержка браузеров для Flex Grid

Flexgrid поддерживается только в Chrome, Firefox, Safari 6+, IE10+, iOS 7+ и Android 4.4+. Flexbox поддерживается в Android 2, но недостаточно надежно для использования с этой сеткой. Мы рекомендуем использовать flexgrid только для проектов, которые могут жить с чисто передовой поддержкой браузера.

В Firefox 43+ изображения в Столбцах flex могут переполнять свой контейнер. Чтобы исправить это, добавьте заданную ширину к любым изображениям внутри столбца flex или используйте width: 100% для полноцветных изображений.


Базовая сетка Flex Grid

Структура гибкой сетки идентична структуре плавающей сетки. Строки используют класс .row и столбцы используют класс .column или .columns. Базовый процентный размер также может быть выполнен с использованием тех же классов сетки, к которым вы привыкли: .малый-6, .средний-12 и так далее.

<div class="row">
  <div class="columns small-6">6 columns</div>
  <div class="columns small-6">6 columns</div>
</div>
<div class="row">
  <div class="columns medium-6 large-4">12/6/4 columns</div>
  <div class="columns medium-6 large-8">12/6/8 columns</div>
</div>

6 columns
6 columns
12/6/4 columns
12/6/8 columns

Расширенный Размер

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

<div class="row">
  <div class="columns small-4">4 columns</div>
  <div class="columns">Whatever's left!</div>
</div>

4 columns
Whatever's left!

Адаптивные Настройки

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

.small-12

 вручную.

Чтобы вернуться к поведению расширения из процентного или сжимающего поведения, используйте классы

 .medium-expand or .large-expand

В приведенном ниже примере столбцы складываются на небольших экранах и становятся равномерными по ширине на больших экранах.

<div class="row">
  <div class="columns small-12 large-expand">One</div>
  <div class="columns small-12 large-expand">Two</div>
  <div class="columns small-12 large-expand">Three</div>
  <div class="columns small-12 large-expand">Four</div>
  <div class="columns small-12 large-expand">Five</div>
  <div class="columns small-12 large-expand">Six</div>
</div>

Flex Grid