Bootstrap 4 flexbox: Flex. Утилиты · Bootstrap. Версия v4.0.0

Flex. Утилиты · Bootstrap. Версия v4.0.0

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

Задействуйте «гибкое» поведение

Применяйте утилиты display для создания гибкого контейнера и трансформируйте прямые дочерние элементы в «гибкие». Гибкие контейнеры и элементы можно изменять дополнительными свойствами гибкости.

Я — контейнер flexbox!

<div>Я - контейнер flexbox!</div>

Я встроенный контейнер flexbox!

<div>Я встроенный контейнер flexbox!</div>

Также существуют отзывчивые варианты .d-flex и .d-inline-flex.

• .d-flex
• . d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex

Направление

Задайте направление гибких элементов в гибком контейнере утилитами направления. В большинстве случаев вы можете пропустить «горизонтальный класс» в данном случае, т.к. умолчание браузера – row. Однако вы можете попасть в ситуацию, где вам понадобится явно задать это значение (например, при разработке отзывчивой верстки).

Используйте элемент класса .flex-row для задания горизонтального направления (умолчание браузера), или .flex-row-reverse для того, чтобы горизонтальное направление начиналось с противоположной стороны.

Flex элемент 1

Flex элемент 2

Flex элемент 3

Flex элемент 1

Flex элемент 2

Flex элемент 3

<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>
<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>

Используйте класс . flex-column для создания вертикального направления, или .flex-column-reverse, чтобы вертикальное направление начиналось с противоположной стороны.

Flex элемент 1

Flex элемент 2

Flex элемент 3

Flex элемент 1

Flex элемент 2

Flex элемент 3

<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>
<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>

Для flex-direction также есть отзывчивые вариации.

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse
• .flex-sm-row
• . flex-sm-row-reverse
• .flex-sm-column
• .flex-sm-column-reverse
• .flex-md-row
• .flex-md-row-reverse
• .flex-md-column
• .flex-md-column-reverse
• .flex-lg-row
• .flex-lg-row-reverse
• .flex-lg-column
• .flex-lg-column-reverse
• .flex-xl-row
• .flex-xl-row-reverse
• .flex-xl-column
• .flex-xl-column-reverse

Выравнивайте содержимое

Пользуйтесь утилитами justify-content или контейнерами флексбокса для изменения выравнивания гибких элементов по главной оси (ось х по умолчанию, ось у – если flex-direction: column). Выбирайте из start (умолчание браузера), end, center, between или around.

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

Отзывчивые вариации для justify-content.

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .
  justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around

Выравнивание элементов

Используйте утилиты align-items в контейнерах флексбокса для изменения выравнивания гибких элементов по перекрестной оси (ось у по умолч. , ось х – если flex-direction: column). Выбирайте из start, end, center, baseline или stretch (умолчание браузера).

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

Отзывчивые вариации для align-items.

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch
• . align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch

Align self

Используйте утилиты align-self в гибких элементах для индивидуального изменения их выравнивания по перекрестной оси (ось у по умолч. , ось х – если flex-direction: column). Выбирайте из таких же параметров, как у align-items: start, end, center, baseline или stretch (умолчание браузера).

Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент

<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>

Отзывчивые вариации для align-self.

• .align-self-start
• . align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch
• .align-self-sm-start
• .align-self-sm-end
• .align-self-sm-center
• .align-self-sm-baseline
• .align-self-sm-stretch
• .align-self-md-start
• .align-self-md-end
• .align-self-md-center
• .align-self-md-baseline
• .align-self-md-stretch
• .align-self-lg-start
• .align-self-lg-end
• .align-self-lg-center
• .align-self-lg-baseline
• .align-self-lg-stretch
• .align-self-xl-start
• . align-self-xl-end
• .align-self-xl-center
• .align-self-xl-baseline
• .align-self-xl-stretch

Авто-марджины

Флексбокс может невероятные вещи – если вы сочетаете выравнивание гибких элементов с авто-марджинами. Три примера ниже показывают контроль над гибкими элементами через авто-марджины: 1. по умолчанию (нет авто-марджина), 2. «прижимаем» два элемента к правому краю (.mr-auto), 3. «прижимаем» два элемента к левому краю (.ml-auto).

К несчастью, IE10 и IE11 не очень-то поддерживают авто-марджины в гибких элементах, чьи «родительские элементы» имеют атрибут justify-content. Смотри детали здесь.

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

С элементами выравнивания

Передвигайте по вертикали один из гибких элементов к верху или низу контейнера, сочетая align-items, flex-direction: column и margin-top: auto или margin-bottom: auto.

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

Обертка

Изменяйте способ оборачивания гибких элементов в гибком контейнере. Можете совсем не оборачивать их (умолчание браузера) с классом .flex-nowrap, можете обернуть их классом .flex-wrap или реверсируйте оборачивание с классом .flex-wrap-reverse.

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  ...
</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  . ..
</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  ...
</div>

Отзывчивые вариации есть также для flex-wrap.

• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse
• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• . flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse

Порядок

Мы создали параметры лишь для придания элементу первого или последнего порядкового положения, как и для сброса данной настройки для использования порядка DOM. Так как order принимает цифровое значение (например, 5), добавьте обычный CSS для создания необходимых дополнительных значений.

Первый flex элемент

Второй flex элемент

Третий flex элемент

<div>
  <div>Первый flex элемент</div>
  <div>Второй flex элемент</div>
  <div>Третий flex элемент</div>
</div>

Отзывчивые вариации есть также для order.

• .order-0
• .order-1
• .order-2
• .order-3
• . order-4
• .order-5
• .order-6
• .order-7
• .order-8
• .order-9
• .order-10
• .order-11
• .order-12
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-sm-6
• .order-sm-7
• .order-sm-8
• .order-sm-9
• .order-sm-10
• .order-sm-11
• .order-sm-12
• .order-md-0
• .order-md-1
• .order-md-2
• . order-md-3
• .order-md-4
• .order-md-5
• .order-md-6
• .order-md-7
• .order-md-8
• .order-md-9
• .order-md-10
• .order-md-11
• .order-md-12
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-lg-6
• .order-lg-7
• .order-lg-8
• .order-lg-9
• .order-lg-10
• .order-lg-11
• .order-lg-12
• .order-xl-0
• .order-xl-1
• . order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xl-6
• .order-xl-7
• .order-xl-8
• .order-xl-9
• .order-xl-10
• .order-xl-11
• .order-xl-12

Выравнивание содержимого

Используйте утилиты align-content в контейнерах флексбокса, чтобы гибкие элементы выравнивались «вместе» по одной перекрестной оси. Выбирайте из start (умолчание браузера), end, center, between, around или stretch. Чтобы продемонстрировать эти утилиты, мы применили flex-wrap: wrap и увеличили количество элементов flex.

Внимание! Это свойство не действует на одиночных рядах или одиночных гибких элементах.

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  ...
</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>...</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>. ..</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>...</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>...</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>. ..</div>

Отзывчивые вариации есть также для align-content.

• .align-content-start
• .align-content-end
• .align-content-center
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• . align-content-lg-center
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-around
• .align-content-xl-stretch

Flexbox блочная система · Bootstrap

Варианты структурирования страниц с Bootstrap, включая глобальные стили, необходимые инструменты, блочная система и другие.

Фантазии более современную блочная система? Включить flexbox поддержки в Bootstrap чтобы воспользоваться всеми преимуществами CSS’гибкий модуль коробка для еще большего контроля над %вашего сайта 3%, выравнивания и распределения информации.

Bootstrap flexbox грид включает поддержку для каждого объекта из нашего по умолчанию значение блочная система, а затем некоторые. Пожалуйста, прочитайте по умолчанию значение блочная система документы прежде чем перейти через эту страницу. Особенности, которые покрыты подводятся только здесь. Обратите внимание, что Internet Explorer 9 не поддерживает flexbox, поэтому с осторожностью при включении его.

Внимание! этот flexbox грид документация приводится в действие дополнительный файл CSS, который переопределяет по умолчанию блочная система с CSS. Это только в нашей принимала документы и отключена в развитии.

Содержание

• Содержание
• Как это работает
• Авто-разметка столбцов
• Адаптивный flexbox
• Вертикальное выравнивание
• Горизонтальное выравнивание

Как это работает

В flexbox блочная система ведет себя похожими на наши по умолчанию значение блочная система, но с некоторыми существенными отличиями:

• Грид примеси и для создания более смысловых макетов включить поддержку flexbox. Просто включить flexbox поддержки, чтобы использовать их, как вы бы в противном случае.
• Вложения, зачеты, толкает, и тянет все поддерживается в flexbox блочная система.
• Flexbox грид столбиками без ширины установить автоматически разметка с одинаковой шириной. Например, четыре столбца автоматически быть шириной 25%.
• Flexbox грид столбцы имеют значительно более доступные варианты выравнивания, включая выравнивание по вертикали.
• В отличие от По умолчанию значение блочная система где грид столбец начинается в полную ширину в xs уровня, flexbox требует .col-{breakpoint} класс для каждого уровня.

Холодок? Awesome—продолжайте чтение для получения дополнительной информации и некоторые фрагменты кода.

Авто-разметка столбцов

Когда flexbox поддержки, вы можете использовать точки останова конкретных классов столбца равной ширины столбцов. Добавить любое количество .col-{breakpoint}s для каждой точки необходимо и вы хорошо идти. Например, вот два грид разметки, которые применяются к каждому устройству и возможность просмотра.

1 of 2

1 of 2

1 of 3

1 of 3

1 of 3

<div>
  <div>
    <div>
      1 of 2
    </div>
    <div>
      1 of 2
    </div>
  </div>
  <div>
    <div>
      1 of 3
    </div>
    <div>
      1 of 3
    </div>
    <div>
      1 of 3
    </div>
  </div>
</div>

Авто-%и 2% flexbox грид столбцы также означает, что вы можете установить ширину одного столбца, а остальные автоматически изменяет вокруг него. Вы можете использовать предопределенный грид классов (как показано ниже), грид примеси, или рядные шириной. Обратите внимание, что другие столбцы изменится независимо от ширины центральной колонки.

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

<div>
  <div>
    <div>
      1 of 3
    </div>
    <div>
      2 of 3 (wider)
    </div>
    <div>
      3 of 3
    </div>
  </div>
  <div>
    <div>
      1 of 3
    </div>
    <div>
      2 of 3 (wider)
    </div>
    <div>
      3 of 3
    </div>
  </div>
</div>

Адаптивный flexbox

В отличие от По умолчанию значение блочная система, в flexbox грид требуется класс для полной ширины столбцов. Если у вас есть .col-sm-6 и не добавить .col-xs-12 ваш xs грид не будет правильно отображаться. Обратите внимание, что flexbox грид уровни еще шкалу в точки останова, так что если вы хотите два 50% широкие столбцы через sm, md и lg, нужно только установить .col-sm-6.

1 of 2 (stacked on mobile)

1 of 2 (stacked on mobile)

<div>
  <div>
    <div>
      1 of 2 (stacked on mobile)
    </div>
    <div>
      1 of 2 (stacked on mobile)
    </div>
  </div>
</div>

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

Используйте flexbox коммунальные услуги выравнивание вертикальное выравнивание столбцов.

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

<div>
  <div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
  </div>
  <div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
  </div>
  <div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
  </div>
</div>

One of three columns

One of three columns

One of three columns

<div>
  <div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
  </div>
</div>

Горизонтальное выравнивание

Flexbox утилиты для горизонтального выравнивания существуют по ряду разметка вариантов.

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

<div>
  <div>
    <div>
      One of two columns
    </div>
    <div>
      One of two columns
    </div>
  </div>
  <div>
    <div>
      One of two columns
    </div>
    <div>
      One of two columns
    </div>
  </div>
  <div>
    <div>
      One of two columns
    </div>
    <div>
      One of two columns
    </div>
  </div>
  <div>
    <div>
      One of two columns
    </div>
    <div>
      One of two columns
    </div>
  </div>
  <div>
    <div>
      One of two columns
    </div>
    <div>
      One of two columns
    </div>
  </div>
</div>

Bootstrap 4 Flex

❮ Предыдущая Далее ❯

---

Bootstrap 4 Flex

Используйте классы flex для управления компоновкой компонентов Bootstrap 4.

---

Flexbox

Самая большая разница между Bootstrap 3 и Bootstrap 4 заключается в том, что Bootstrap 4 теперь использует flexbox вместо float для обработки макета.

Модуль Flexible Box Layout упрощает разработку гибкой адаптивной структуры макета без использования float или позиционирования. Если вы новичок в flex, вы можете прочитать об этом в нашем учебнике по CSS Flexbox.

Примечание. Flexbox не поддерживается в IE9 и более ранних версиях.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для исправления критических ошибок и изменений в документации. Однако новые функции добавляться не будут. Это.

Чтобы создать контейнер flexbox и преобразовать прямые дочерние элементы в flex-элементы, используйте класс d-flex :

Example

Flex item 1

Flex-элемент 2

Flex-элемент 3

Пример

Попробуйте сами »

Чтобы создать встроенный контейнер flexbox, используйте класс d-inline-flex :

Пример

Гибкий элемент 1

Гибкий элемент 2

Гибкий элемент 3

Пример

<дел>