Flexbox Bootstrap 4 / Информация / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Информация

Bootstrap: 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Вес файла: 4.4 Kb

Уникальный ID: 2452

Количество символов:

Посмотрели: 3637 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-2452-20

Скачали бесплатно: 92 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: flexbox, flexbox bootstrap, flex, flexbox по центру, по центру, Bootstrap

Поделился: BootstrapТема

Добавлено: 2017-11-11 в 01:38

Метка: 1566150836

⇄ ⇅

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<h1 class="text-center">Flexbox Bootstrap 4</h1>
<p class="lead text-center">Примеры использования флексбокс классов разметки Bootstrap 4</p>
<hr />

<h2 class="text-center">Демо стили примеров</h2>
<p class="lead text-center">Дополнительные стили которые используются в примерах для классов: <code>.my-flex-container</code>, <code>.my-flex-container-column</code>, <code>.my-flex-item</code>, <code>.my-flex-item-2</code>, <code>.my-flex-item-3</code>.</p>
<pre><code>
 .my-flex-container {
 border: 2px solid #694198;
 height: 100px;
 margin-bottom: 20px;
 }
 .my-flex-container-column {
 border: 2px solid #694198;
 height: 200px;
 margin-bottom: 20px;
 }
 .my-flex-item, .my-flex-item-2, .my-flex-item-3 {
 background-color: lightgrey;
 border: 1px dotted #222222;
 }
 .my-flex-item {
 height: 48px;
 }
 .my-flex-item-2 {
 height: 96px;
 }
 .my-flex-item-3 {
 height: 100%;
 }
</code></pre>

<hr />

<h2 class="text-center">Контейнер d-flex</h2>
<p class="lead">Классами: <code>.d-flex</code> или <code>.d-inline-flex</code> создаётся контейнер Flexbox, с блочными и строчными свойствами соответственно. Дополнительные классы <code>.d-sm-flex</code>, <code>.d-sm-inline-flex</code>, <code>.d-md-flex</code>, <code>.d-md-inline-flex</code>, <code>.d-lg-flex</code>, <code>.d-lg-inline-flex</code>, <code>.d-xl-flex</code>, <code>.d-xl-inline-flex</code> определяют разрешение устройства по установленным значениям <code>@media</code>.</p>

<h2 class="text-center">Контейнер flex-row</h2>
<p class="lead">Классами <code>.flex-row</code> и <code>.flex-row-reverse</code> определяется горизонтальное направление создаваемых элементов, первый класс указывает направление "с лева на право", а второе "с права на лево". Дополнительные классы определяющие разрешение устройства: <code>.flex-sm-row</code>, <code>.flex-sm-row-reverse</code>, <code>.flex-md-row</code>, <code>.flex-md-row-reverse</code>, <code>.flex-lg-row</code>, <code>.flex-lg-row-reverse</code>, <code>.flex-xl-row</code>, <code>.flex-xl-row-reverse</code> используются при необходимости.</p>

<h3>Применение классов: d-flex, flex-row</h3>
<p class="lead">Используя эти два класса, мы определяем контейнер гибкой коробки, который упорядочивает все элементы в одной строке.</p>
<pre><code>
&lt;div class="d-flex flex-row my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item">3</div>
</div>

<h3>Применение классов: d-flex, flex-row-reverse</h3>
<p class="lead">Используя эти два класса, мы определяем контейнер гибкой коробки, который упорядочивает все элементы в обратном порядке.</p>
<pre><code>
&lt;div class="d-flex flex-row-reverse my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row-reverse my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item">3</div>
</div>

<h2 class="text-center">Направление flex-column</h2>
<p class="lead">Классами <code>.flex-column</code> и <code>.flex-column-reverse</code> определяется вертикальное направление создаваемых элементов, первый класс указывает направление "с верху в низ", а второе "с низу вверх". Классы контрольных точек: <code>.flex-sm-column</code>, <code>.flex-sm-column-reverse</code>, <code>.flex-md-column</code>, <code>.flex-md-column-reverse</code>, <code>.flex-lg-column</code>, <code>.flex-lg-column-reverse</code>, <code>.flex-xl-column</code>, <code>.flex-xl-column-reverse</code>.</p>

<h3>Применение классов: d-flex, flex-row, flex-column</h3>
<p class="lead">Элементы будут выстраиваться с верху в низ.</p>
<pre><code>
&lt;div class="d-flex flex-row my-flex-container-column flex-column"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row my-flex-container-column flex-column">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item">3</div>
</div>

<h3>Применение классов: d-flex, flex-row, flex-column-reverse</h3>
<p class="lead">Элементы будут выстраиваться с низу в верх.</p>
<pre><code>
&lt;div class="d-flex flex-row my-flex-container-column flex-column-reverse"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row my-flex-container-column flex-column-reverse">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item">3</div>
</div>

<h2 class="text-center">Распределение justify-content</h2>
<p class="lead">Классы <code>.justify-content-start</code>, <code>.justify-content-end</code>, <code>.justify-content-center</code>, <code>.justify-content-between</code> и <code>.justify-content-around</code> производят дополнительное распределение на оси координат X и Y. Классы определения разрешения: <code>.justify-content-sm-start</code>, <code>.justify-content-sm-end</code>, <code>.justify-content-sm-center</code>, <code>.justify-content-sm-between</code>, <code>.justify-content-sm-around</code>, <code>.justify-content-md-start</code>, <code>.justify-content-md-end</code>, <code>.justify-content-md-center</code>, <code>.justify-content-md-between</code>, <code>.justify-content-md-around</code>, <code>.justify-content-lg-start</code>, <code>.justify-content-lg-end</code>, <code>.justify-content-lg-center</code>, <code>.justify-content-lg-between</code>, <code>.justify-content-lg-around</code>, <code>.justify-content-xl-start</code>, <code>.justify-content-xl-end</code>, <code>.justify-content-xl-center</code>, <code>.justify-content-xl-between</code>, <code>.justify-content-xl-around</code>.</p>

<h3>Применение классов: d-flex, flex-row, justify-content-start</h3>
<p class="lead">Элементы распределяются от левого верхнего края контейнера.</p>
<pre><code>
&lt;div class="d-flex flex-row justify-content-start my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row justify-content-start my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item">3</div>
</div>

<h3>Применение классов: d-flex, flex-row, justify-content-end</h3>
<p class="lead">Элементы распределяются от правого верхнего края контейнера.</p>
<pre><code>
&lt;div class="d-flex flex-row justify-content-end my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row justify-content-end my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item">3</div>
</div>

<h3>Применение классов: d-flex, flex-row, justify-content-center</h3>
<p class="lead">Элементы распределяются от правого и левого верхнего края контейнера поровну.</p>
<pre><code>
&lt;div class="d-flex flex-row justify-content-center my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row justify-content-center my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item">3</div>
</div>

<h3>Применение классов: d-flex, flex-row, justify-content-between</h3>
<p class="lead">Пропорциональное распределение элементов, первый и последний из элементов занимают крайнее левое и крайнее правое положение, остальное расстояние между элементами (в зависимости от количества) распределяются поровну.</p>
<pre><code>
&lt;div class="d-flex flex-row justify-content-between my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;4&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row justify-content-between my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item">3</div>
 <div class="p-2 my-flex-item">4</div>
</div>

<h3>Применение классов: d-flex, flex-row, justify-content-around</h3>
<p class="lead">Внутреннее пространство контейнера распределяется между всеми элементами поровну, дополнительно с права и с лева создаются отступы, их размер определяется 50% значением от пространства между соседними элементами (зависит от количества и общей свободной ширины контейнера.</p>
<pre><code>
&lt;div class="d-flex flex-row justify-content-around my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;4&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;5&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row justify-content-around my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item">3</div>
 <div class="p-2 my-flex-item">4</div>
 <div class="p-2 my-flex-item">5</div>
</div>

<h2 class="text-center">Вертикальное выравнивание align-items</h2>
<p class="lead">Выравнивание элементов по вертикали осуществляется классами <code>.align-items-start</code>, <code>.align-items-end</code>, <code>.align-items-center</code>, <code>.align-items-baseline</code>, <code>.align-items-stretch</code>. Дополнительные классы определения устройств: <code>.align-items-sm-start</code>, <code>.align-items-sm-end</code>, <code>.align-items-sm-center</code>, <code>.align-items-sm-baseline</code>, <code>.align-items-sm-stretch</code>, <code>.align-items-md-start</code>, <code>.align-items-md-end</code>, <code>.align-items-md-center</code>, <code>.align-items-md-baseline</code>, <code>.align-items-md-stretch</code>, <code>.align-items-lg-start</code>, <code>.align-items-lg-end</code>, <code>.align-items-lg-center</code>, <code>.align-items-lg-baseline</code>, <code>.align-items-lg-stretch</code>, <code>.align-items-xl-start</code>, <code>.align-items-xl-end</code>, <code>.align-items-xl-center</code>, <code>.align-items-xl-baseline</code>, <code>.align-items-xl-stretch</code>.</p>

<h3>Применение классов: d-flex, flex-row, align-items-start</h3>
<p class="lead">Элементы распределяются от левого верхнего края контейнера по вертикали.</p>
<pre><code>
&lt;div class="d-flex flex-row align-items-start my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row align-items-start my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item">3</div>
</div>

<h3>Применение классов: d-flex, flex-row, align-items-end</h3>
<p class="lead">Элементы распределяются от левого нижнего края контейнера по вертикали.</p>
<pre><code>
&lt;div class="d-flex flex-row align-items-end my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row align-items-end my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item">3</div>
</div>

<h3>Применение классов: d-flex, flex-row, align-items-center</h3>
<p class="lead">Элементы распределяются между крайним верхним с лева и крайним нижним с лева по вертикали, устанавливая равное расстояние между низом и верхом.</p>
<pre><code>
&lt;div class="d-flex flex-row align-items-center my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row align-items-center my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item">3</div>
</div>

<h3>Применение классов: d-flex, flex-row, align-items-baseline</h3>
<p class="lead">Вертикальное выравнивание происходит вдоль базовой линии, в отличии от <code>.align-items-start</code> базовая линия может быть смещена пользовательскими изменениями.</p>
<pre><code>
&lt;div class="d-flex flex-row align-items-baseline my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item" style="height: 90px"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row align-items-baseline my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item" style="height: 90px">2</div>
 <div class="p-2 my-flex-item">3</div>
</div>

<h3>Применение классов: d-flex, flex-row, align-items-stretch</h3>
<p class="lead">Эластичное выравнивание заполняет свободную вертикальную линию (зависит от использования пользовательских значений).</p>
<pre><code>
&lt;div class="d-flex flex-row align-items-stretch my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item-3"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row align-items-stretch my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item-3">3</div>
</div>

<h2 class="text-center">Выравнивание одного элемента align-self</h2>
<p class="lead">Flex классы применяемые к одному элементу: <code>.align-self-start</code>, <code>.align-self-end</code>, <code>.align-self-center</code>, <code>.align-self-baseline</code>, <code>.align-self-stretch</code>, соответственно можно использовать классы, индивидуальные для каждого размера: <code>.align-self-sm-start</code>, <code>.align-self-sm-end</code>, <code>.align-self-sm-center</code>, <code>.align-self-sm-baseline</code>, <code>.align-self-sm-stretch</code>, <code>.align-self-md-start</code>, <code>.align-self-md-end</code>, <code>.align-self-md-center</code>, <code>.align-self-md-baseline</code>, <code>.align-self-md-stretch</code>, <code>.align-self-lg-start</code>, <code>.align-self-lg-end</code>, <code>.align-self-lg-center</code>, <code>.align-self-lg-baseline</code>, <code>.align-self-lg-stretch</code>, <code>.align-self-xl-start</code>, <code>.align-self-xl-end</code>, <code>.align-self-xl-center</code>, <code>.align-self-xl-baseline</code>, <code>.align-self-xl-stretch</code>.</p>

<h3>Применение классов: d-flex, flex-row, align-self-start</h3>
<p class="lead">Эластичное выравнивание второго элемента, он занимает половину свободной высоты между 1 и 3 элементами и прижимается к верхней части.</p>
<pre><code>
&lt;div class="d-flex flex-row align-items-stretch my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item-2"&gt;1&lt;/div&gt;
 &lt;div class="p-2 align-self-start my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item-2"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row my-flex-container">
 <div class="p-2 my-flex-item-2">1</div>
 <div class="p-2 align-self-start my-flex-item">2</div>
 <div class="p-2 my-flex-item-2">3</div>
</div>

<h3>Применение классов: d-flex, flex-row, align-self-end</h3>
<p class="lead">Эластичное выравнивание второго элемента, он занимает половину свободной высоты между 1 и 3 элементами и прижимается к нижней части.</p>
<pre><code>
&lt;div class="d-flex flex-row align-items-stretch my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item-2"&gt;1&lt;/div&gt;
 &lt;div class="p-2 align-self-end my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item-2"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row my-flex-container">
 <div class="p-2 my-flex-item-2">1</div>
 <div class="p-2 align-self-end my-flex-item">2</div>
 <div class="p-2 my-flex-item-2">3</div>
</div>

<h3>Применение классов: d-flex, flex-row, align-self-center</h3>
<p class="lead">Эластичное выравнивание второго элемента, он занимает половину свободной высоты между 1 и 3 элементами и выстраивается по центру.</p>
<pre><code>
&lt;div class="d-flex flex-row align-items-stretch my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item-2"&gt;1&lt;/div&gt;
 &lt;div class="p-2 align-self-center my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item-2"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row my-flex-container">
 <div class="p-2 my-flex-item-2">1</div>
 <div class="p-2 align-self-center my-flex-item">2</div>
 <div class="p-2 my-flex-item-2">3</div>
</div>

<h3>Применение классов: d-flex, flex-row, align-self-baseline</h3>
<p class="lead">Эластичное выравнивание второго элемента, он занимает половину свободной высоты между 1 и 3 элементами и выстраивается по базовой линии.</p>
<pre><code>
&lt;div class="d-flex flex-row align-items-stretch my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item-2"&gt;1&lt;/div&gt;
 &lt;div class="p-2 align-self-baseline my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item-2"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row my-flex-container">
 <div class="p-2 my-flex-item-2">1</div>
 <div class="p-2 align-self-baseline my-flex-item">2</div>
 <div class="p-2 my-flex-item-2">3</div>
</div>

<h3>Применение классов: d-flex, flex-row, align-self-stretch</h3>
<p class="lead">Эластичное выравнивание второго элемента, он занимает всю свободную часть высоты между 1 и 3 элементами, используется браузером по умолчанию.</p>
<pre><code>
&lt;div class="d-flex flex-row align-items-stretch my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item-2"&gt;1&lt;/div&gt;
 &lt;div class="p-2 align-self-stretch my-flex-item-3"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item-2"&gt;3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 align-self-stretch my-flex-item-3">2</div>
 <div class="p-2 my-flex-item">3</div>
</div>

<h2 class="text-center">Обёртка wrap</h2>
<p class="lead">Классы указывающие обёртку гибкого контейнера: <code>.flex-nowrap</code>, <code>.flex-wrap</code>, <code>.flex-wrap-reverse</code>, есть и классы для отдельных разрешений: <code>.flex-sm-nowrap</code>,
<code>.flex-sm-wrap</code>, <code>.flex-sm-wrap-reverse</code>, <code>.flex-md-nowrap</code>, <code>.flex-md-wrap</code>, <code>.flex-md-wrap-reverse</code>, <code>.flex-lg-nowrap</code>, <code>.flex-lg-wrap</code>, <code>.flex-lg-wrap-reverse</code>, <code>.flex-xl-nowrap</code>, <code>.flex-xl-wrap</code>, <code>.flex-xl-wrap-reverse</code>.</p>

<h3>Применение классов: d-flex, flex-nowrap</h3>
<p class="lead">Элементы без обёртки контейнера, выпирающие элементы уходят за границу родительского элемента, в невидимую область, браузер использует это свойство по умолчанию.</p>
<pre><code>
&lt;div class="d-flex flex-nowrap my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;4&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;5&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;6&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;7&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;8&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;9&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;10&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;11&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;12&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;13&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;14&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;15&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;16&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;17&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;18&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-nowrap my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item">3</div>
 <div class="p-2 my-flex-item">4</div>
 <div class="p-2 my-flex-item">5</div>
 <div class="p-2 my-flex-item">6</div>
 <div class="p-2 my-flex-item">7</div>
 <div class="p-2 my-flex-item">8</div>
 <div class="p-2 my-flex-item">9</div>
 <div class="p-2 my-flex-item">10</div>
 <div class="p-2 my-flex-item">11</div>
 <div class="p-2 my-flex-item">12</div>
 <div class="p-2 my-flex-item">13</div>
 <div class="p-2 my-flex-item">14</div>
 <div class="p-2 my-flex-item">15</div>
 <div class="p-2 my-flex-item">16</div>
 <div class="p-2 my-flex-item">17</div>
 <div class="p-2 my-flex-item">18</div>
</div>

<h3>Применение классов: d-flex, flex-wrap</h3>
<p class="lead">Элементы в обёртке контейнера, все элементы распределяются с лева на право.</p>
<pre><code>
&lt;div class="d-flex flex-wrap my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;4&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;5&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;6&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;7&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;8&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;9&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;10&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;11&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;12&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;13&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;14&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;15&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;16&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;17&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;18&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-wrap my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item">3</div>
 <div class="p-2 my-flex-item">4</div>
 <div class="p-2 my-flex-item">5</div>
 <div class="p-2 my-flex-item">6</div>
 <div class="p-2 my-flex-item">7</div>
 <div class="p-2 my-flex-item">8</div>
 <div class="p-2 my-flex-item">9</div>
 <div class="p-2 my-flex-item">10</div>
 <div class="p-2 my-flex-item">11</div>
 <div class="p-2 my-flex-item">12</div>
 <div class="p-2 my-flex-item">13</div>
 <div class="p-2 my-flex-item">14</div>
 <div class="p-2 my-flex-item">15</div>
 <div class="p-2 my-flex-item">16</div>
 <div class="p-2 my-flex-item">17</div>
 <div class="p-2 my-flex-item">18</div>
</div>

<h3>Применение классов: d-flex, flex-wrap-reverse</h3>
<p class="lead">Элементы в обёртке контейнера, все элементы распределяются с левого нижнего угла.</p>
<pre><code>
&lt;div class="d-flex flex-wrap-reverse my-flex-container"&gt;
 &lt;div class="p-2 my-flex-item"&gt;1&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;2&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;3&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;4&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;5&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;6&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;7&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;8&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;9&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;10&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;11&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;12&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;13&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;14&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;15&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;16&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;17&lt;/div&gt;
 &lt;div class="p-2 my-flex-item"&gt;18&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-wrap-reverse my-flex-container">
 <div class="p-2 my-flex-item">1</div>
 <div class="p-2 my-flex-item">2</div>
 <div class="p-2 my-flex-item">3</div>
 <div class="p-2 my-flex-item">4</div>
 <div class="p-2 my-flex-item">5</div>
 <div class="p-2 my-flex-item">6</div>
 <div class="p-2 my-flex-item">7</div>
 <div class="p-2 my-flex-item">8</div>
 <div class="p-2 my-flex-item">9</div>
 <div class="p-2 my-flex-item">10</div>
 <div class="p-2 my-flex-item">11</div>
 <div class="p-2 my-flex-item">12</div>
 <div class="p-2 my-flex-item">13</div>
 <div class="p-2 my-flex-item">14</div>
 <div class="p-2 my-flex-item">15</div>
 <div class="p-2 my-flex-item">16</div>
 <div class="p-2 my-flex-item">17</div>
 <div class="p-2 my-flex-item">18</div>
</div>

<h2 class="text-center">Порядок распределения отдельных элементов order</h2>
<p class="lead">Классы указывающие обёртку гибкого контейнера: <code>.order-first</code>, <code>.order-last</code>, <code>.order-unordered</code> и дополнительные классы: <code>.order-sm-first</code>, <code>.order-sm-last</code>, <code>.order-sm-unordered</code>, <code>.order-md-first</code>, <code>.order-md-last</code>, <code>.order-md-unordered</code>, <code>.order-lg-first</code>, <code>.order-lg-last</code>, <code>.order-lg-unordered</code>, <code>.order-xl-first</code>, <code>.order-xl-last</code>, <code>.order-xl-unordered</code>.</p>

<h3>Применение классов: d-flex, flex-nowrap, order-last, order-first, order-unordered</h3>
<p class="lead">Распределение происходит по правилу первый <code>.order-first</code>, последний <code>.order-last</code>, а неупорядоченные <code>.order-unordered</code> идут после упорядоченных по своей очерёдности.</p>
<pre><code>
&lt;div class="d-flex flex-nowrap my-flex-container"&gt;
 &lt;div class="p-2 order-last my-flex-item-2"&gt;1&lt;/div&gt;
 &lt;div class="p-2 order-unordered my-flex-item-2"&gt;2&lt;/div&gt;
 &lt;div class="p-2 order-first my-flex-item-2"&gt;3&lt;/div&gt;
 &lt;div class="p-2 order-unordered my-flex-item-2"&gt;4&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-nowrap my-flex-container">
 <div class="p-2 order-last my-flex-item-2">1</div>
 <div class="p-2 order-unordered my-flex-item-2">2</div>
 <div class="p-2 order-first my-flex-item-2">3</div>
 <div class="p-2 order-unordered my-flex-item-2">4</div>
</div>

<h2 class="text-center">Сделать по центру</h2>
<p class="lead">Простейший способ размещения элемента по центру соответственно выделенной высоты и ширины.</p>
<pre><code>
&lt;div class="d-flex flex-row align-items-center justify-content-between" style="height:400px;border: 2px solid #694198;"&gt;
 &lt;div&gt;&lt;/div&gt;
 &lt;div class="h1"&gt;CENTER&lt;/div&gt;
 &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="d-flex flex-row align-items-center justify-content-between" style="height:400px;border: 2px solid #694198;">
 <div></div>
 <div class="h1">CENTER</div>
 <div></div>
</div>

<hr />

<footer class="d-flex flex-wrap justify-content-center" style="width:100%;background:#222">
 <p class="h2 p-5"><a href="https://bootstraptema.ru/stuff/snippets_bootstrap/information/flexbox_bootstrap_4/21-1-0-2452" target="_blank">BootstrapTema</a></p>
</footer>

</div>

BootstrapTema

Flexbox Bootstrap 4

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0