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-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
Пример
<дел>