English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 базовый учебник

Bootstrap4 Flex (эластичный) макет

Bootstrap4 использует класс flex для управления макетом страницы.

Эластичный блок (flexbox)

Самое большое различие между Bootstrap 3 и Bootstrap 4 заключается в том, что Bootstrap 4 использует эластичные блоки для布局, а не浮动.

Эластичный блок - это новый режим布局 CSS3, который лучше подходит для адаптивного дизайна, если вы еще не знакомы с flex, можно прочитать наше CSS3 эластичный блок (Flex Box) Урок

Внимание: IE9 и более ранние версии не поддерживают эластичные блоки, поэтому если вам нужно обеспечить совместимость с IE8-9, используйте Bootstrap 3.

В следующем примере используется класс d-flex для создания контейнера эластичного блока и установки трех эластичных подэлементов:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>Flex</h2>
　　<p>Для создания контейнера эластичного блока и установки трех эластичных подэлементов можно использовать класс d-flex:</p>
　　<div class="d-flex p-3 bg-secondary text-white">　　
　　　　<div class="p-2 bg-info">Элемент Flex 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>
Проверьте, ‹/›

Результат выполнения будет следующим:

Для создания контейнера эластичного блока, отображаемого на одной строке, можно использовать класс d-inline-flex:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>Внутренний Flex</h2>
　　<p>Для создания контейнера эластичного блока, отображаемого на одной строке, можно использовать класс d-inline-flex:</p>
　　<div class="d-inline-flex p-3 bg-secondary text-white">　　
　　　　<div class="p-2 bg-info">Элемент Flex 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>
Проверьте, ‹/›

Результат выполнения будет следующим:

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

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

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

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>Горизонтальное направление</h2>
　　<p>Использование класса .flex-row для установки горизонтального отображения эластичных подэлементов:</p>
　　<div class="d-flex flex-row bg-secondary mb-3">
　　　　<div class="p-2 bg-info">Элемент Flex 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
　　<p>Класс .flex-row-reverse устанавливает правостороннее выравнивание:</p>
　　<div class="d-flex flex-row-reverse bg-secondary">
　　　　<div class="p-2 bg-info">Элемент Flex 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>
Проверьте, ‹/›

Результат выполнения будет следующим:

вертикальное направление

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

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>Вертикальное направление</h2>
　　<p>Класс .flex-column используется для установки вертикального отображения эластичных подэлементов:</p>
　　<div class="d-flex flex-column mb-3">
　　　　<div class="p-2 bg-info">Элемент Flex 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
　　<p>Класс .flex-column-reverse используется для установки вертикального отображения эластичных подэлементов:</p>
　　<div class="d-flex flex-column-reverse">
　　　　<div class="p-2 bg-info">Элемент Flex 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>
Проверьте, ‹/›

Результат выполнения будет следующим:

расположение содержимого

.justify-content-* классы используются для изменения способа расположения эластичных подэлементов, * может принимать значения:start (по умолчанию), end, center, between или around:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>Способ расположения содержимого</h2>
　　<p>Классы .justify-content-* используются для изменения способа расположения эластичных подэлементов, * может принимать значения: start (по умолчанию), end, center, between или around:</p>
　　<div class="d-flex justify-content-start bg-secondary mb-3">
　　　　<div class="p-2 bg-info">Элемент Flex 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
　　<div class="d-flex justify-content-end bg-secondary mb-3">
　　　　<div class="p-2 bg-info">Элемент Flex 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
　　<div class="d-flex justify-content-center bg-secondary mb-3">
　　　　<div class="p-2 bg-info">Элемент Flex 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
　　<div class="d-flex justify-content-between bg-secondary mb-3">
　　　　<div class="p-2 bg-info">Элемент Flex 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
　　<div class="d-flex justify-content-around bg-secondary mb-3">
　　　　<div class="p-2 bg-info">Элемент Flex 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>
Проверьте, ‹/›

Результат выполнения будет следующим:


равномерная ширина

.flex-fill класс принудительно устанавливает одинаковую ширину для всех эластичных подэлементов:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>Одинаковая ширина</h2>
　　<p>Класс .flex-fill принудительно устанавливает одинаковую ширину для всех эластичных подэлементов:</p>
　　<div class="d-flex mb-3">
　　　　<div class="p-2 flex-fill bg-info">Элемент Flex 1</div>
　　　　<div class="p-2 flex-fill bg-warning">Элемент Flex 2</div>
　　　　<div class="p-2 flex-fill bg-primary">Элемент Flex 3</div>
　　</div>
　　<p>Пример без использования класса .flex-fill:</p>
　　<div　class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2 bg-info">Элемент Flex 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>
Проверьте, ‹/›

Результат выполнения будет следующим:

Расширение

Класс .flex-grow-1 используется для настройки подэлементов, использующих оставшееся пространство. В следующем примере первые два подэлемента установили только необходимые им пространства, последний элемент получает оставшееся пространство.:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>Расширение</h2>
　　<p>Класс .flex-grow-1 используется для настройки подэлементов, использующих оставшееся пространство:</p>
　　<div class="d-flex mb-3">
　　　　<div class="p-2 bg-info">Элемент Flex 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div class="p-2 flex-grow-1 bg-primary">Элемент Flex 3</div>
　　</div>
　　<p>Пример без использования .flex-grow-1:</p>
　　<div　class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2 bg-info">Элемент Flex 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>
Проверьте, ‹/›

Результат выполнения будет следующим:

Подсказка: Использование .flex-shrink-1 для настройки правил сжатия подэлементов.

Порядок

Класс .order позволяет установить порядок эластичных подэлементов, от .order-1 до .order-12, где число ниже вес выше ( .order-1 находится перед .order-2):

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>Порядок</h2>
　　<p>Класс .order позволяет установить порядок эластичных подэлементов, от .order-1 до .order-12, где число ниже вес выше:</p>
　　<div class="d-flex mb-3">
　　　　<div class="p-2 order-3 bg-info">Элемент Flex 1</div>
　　　　<div class="p-2 order-2 bg-warning">Элемент Flex 2</div>
　　　　<div class="p-2 order-1 bg-primary">Элемент Flex 3</div>
　　</div>
</div>
</body>
</html>
Проверьте, ‹/›

Результат выполнения будет следующим:

внешняя отступ

класс .mr-auto позволяет установить правый внешнюю отступ для подэлементов autoт.е. margin-right: auto!important; класс .ml-auto позволяет установить левый внешнюю отступ для подэлементов autoт.е. margin-left: auto!important;:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>Отступы</h2>
　　<p>Класс .mr-auto устанавливает правый внешний отступ дочернего элемента в auto, класс .ml-auto устанавливает левый внешний отступ дочернего элемента в auto,</p>
　　<div　class="d-flex　mb-3　bg-secondary">
　　　　<div　class="p-2　mr-auto　bg-info">Flex　item　1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
　　<div　class="d-flex　mb-3　bg-secondary">
　　　　<div　class="p-2　bg-info">Flex　item　1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　ml-auto　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>
Проверьте, ‹/›

Результат выполнения будет следующим:

Обертка

Эластичный контейнер может содержать дочерние элементы с использованием следующих трех классов: .flex-nowrap (по умолчанию), .flex-wrap или .flex-wrap-reverse. Установите флекс-контейнер в виде одной строки или нескольких строк.

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>Обертка</h2>
　　<p>Эластичный контейнер, содержащий эластичные дочерние элементы, может использовать следующие три класса: .flex-nowrap (по умолчанию), .flex-wrap или .flex-wrap-reverse:</p>
　　<p><code>.flex-wrap:</code></p>
　　<div　class="d-flex　flex-wrap　bg-light">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border">Flex item 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　　　<div　class="p-2　border">Элемент флекс 4</div>
　　　　<div　class="p-2　border">Элемент флекс 5</div>
　　　　<div　class="p-2　border">Элемент флекс 6</div>
　　　　<div　class="p-2　border">Элемент флекс 7</div>
　　　　<div　class="p-2　border">Элемент флекс 8</div>
　　　　<div　class="p-2　border">Элемент флекс 9</div>
　　　　<div　class="p-2　border">Элемент флекс 10</div>
　　　　<div　class="p-2　border">Элемент флекс 11</div>
　　　　<div　class="p-2　border">Элемент флекс 12</div>
　　　　<div　class="p-2　border">Элемент флекс 13</div>
　　　　<div　class="p-2　border">Элемент флекс 14</div>
　　　　<div　class="p-2　border">Элемент флекс 15</div>
　　　　<div　class="p-2　border">Элемент флекс 16</div>
　　　　<div　class="p-2　border">Элемент флекс 17</div>
　　　　<div　class="p-2　border">Элемент флекс 18</div>
　　　　<div　class="p-2　border">Элемент флекс 19</div>
　　　　<div　class="p-2　border">Элемент флекс 20</div>
　　　　<div class="p-2 border">Flex item 21</div>
　　　　<div class="p-2 border">Flex item 22</div>
　　　　<div class="p-2 border">Flex item 23</div>
　　　　<div class="p-2 border">Flex item 24</div>
　　　　<div class="p-2 border">Flex item 25</div>
　　</div>
　　<br>
　　<p><code>.flex-wrap-reverse:</code></p>
　　<div　class="d-flex　flex-wrap-reverse　bg-light">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border">Flex item 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　　　<div　class="p-2　border">Элемент флекс 4</div>
　　　　<div　class="p-2　border">Элемент флекс 5</div>
　　　　<div　class="p-2　border">Элемент флекс 6</div>
　　　　<div　class="p-2　border">Элемент флекс 7</div>
　　　　<div　class="p-2　border">Элемент флекс 8</div>
　　　　<div　class="p-2　border">Элемент флекс 9</div>
　　　　<div　class="p-2　border">Элемент флекс 10</div>
　　　　<div　class="p-2　border">Элемент флекс 11</div>
　　　　<div　class="p-2　border">Элемент флекс 12</div>
　　　　<div　class="p-2　border">Элемент флекс 13</div>
　　　　<div　class="p-2　border">Элемент флекс 14</div>
　　　　<div　class="p-2　border">Элемент флекс 15</div>
　　　　<div　class="p-2　border">Элемент флекс 16</div>
　　　　<div　class="p-2　border">Элемент флекс 17</div>
　　　　<div　class="p-2　border">Элемент флекс 18</div>
　　　　<div　class="p-2　border">Элемент флекс 19</div>
　　　　<div　class="p-2　border">Элемент флекс 20</div>
　　　　<div class="p-2 border">Flex item 21</div>
　　　　<div class="p-2 border">Flex item 22</div>
　　　　<div class="p-2 border">Flex item 23</div>
　　　　<div class="p-2 border">Flex item 24</div>
　　　　<div class="p-2 border">Flex item 25</div>
　　</div>
　　<br>
　　<p><code>.flex-nowrap:</code></p>
　　<div　class="d-flex　flex-nowrap　bg-light">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border">Flex item 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　　　<div　class="p-2　border">Элемент флекс 4</div>
　　　　<div　class="p-2　border">Элемент флекс 5</div>
　　　　<div　class="p-2　border">Элемент флекс 6</div>
　　　　<div　class="p-2　border">Элемент флекс 7</div>
　　　　<div　class="p-2　border">Элемент флекс 8</div>
　　　　<div　class="p-2　border">Элемент флекс 9</div>
　　　　<div　class="p-2　border">Элемент флекс 10</div>
　　　　<div　class="p-2　border">Элемент флекс 11</div>
　　　　<div　class="p-2　border">Элемент флекс 12</div>
　　　　<div　class="p-2　border">Элемент флекс 13</div>
　　　　<div　class="p-2　border">Элемент флекс 14</div>
　　　　<div　class="p-2　border">Элемент флекс 15</div>
　　　　<div　class="p-2　border">Элемент флекс 16</div>
　　　　<div　class="p-2　border">Элемент флекс 17</div>
　　　　<div　class="p-2　border">Элемент флекс 18</div>
　　　　<div　class="p-2　border">Элемент флекс 19</div>
　　　　<div　class="p-2　border">Элемент флекс 20</div>
　　　　<div class="p-2 border">Flex item 21</div>
　　　　<div class="p-2 border">Flex item 22</div>
　　　　<div class="p-2 border">Flex item 23</div>
　　　　<div class="p-2 border">Flex item 24</div>
　　　　<div class="p-2 border">Flex item 25</div>
　　　　<div　class="p-2　border">Flex　item　26</div>
　　　　<div　class="p-2　border">Flex　item　27</div>
　　　　<div　class="p-2　border">Flex　item　28</div>
　　　　<div class="p-2 border">Элемент флекс 29</div>
　　　　<div class="p-2 border">Элемент флекс 30</div>
　　　　<div class="p-2 border">Элемент флекс 31</div>
　　　　<div class="p-2 border">Элемент флекс 32</div>
　　　　<div class="p-2 border">Элемент флекс 33</div>
　　　　<div class="p-2 border">Элемент флекс 34</div>
　　　　<div class="p-2 border">Элемент флекс 35</div>
　　</div>
　　<br>
</div>
</body>
</html>
Проверьте, ‹/›

Результат выполнения будет следующим:

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

Мы можем использовать .align-content-* для управления способом堆ления подэлементов по вертикали, значения включают: .align-content-start (по умолчанию), .align-content-end, .align-content-center, .align-content-between, .align-content-around и .align-content-stretch.

Эти классы не работают в эластичных подэлементах, имеющих только одну строку.

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>Выравнивание содержимого</h2>
　　<p>Мы можем использовать .align-content-* для управления выравниванием подэлементов по вертикали.</p>
　　<p><strong>Внимание:</strong> Этот пример неэффективен на небольших устройствах. Эти классы не работают в эластичных подэлементах, имеющих только одну строку.</p>
　　<p>.align-content-start (по умолчанию):</p>
　　<div class="d-flex flex-wrap align-content-start bg-light" style="height:300px">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border">Flex item 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　　　<div　class="p-2　border">Элемент флекс 4</div>
　　　　<div　class="p-2　border">Элемент флекс 5</div>
　　　　<div　class="p-2　border">Элемент флекс 6</div>
　　　　<div　class="p-2　border">Элемент флекс 7</div>
　　　　<div　class="p-2　border">Элемент флекс 8</div>
　　　　<div　class="p-2　border">Элемент флекс 9</div>
　　　　<div　class="p-2　border">Элемент флекс 10</div>
　　　　<div　class="p-2　border">Элемент флекс 11</div>
　　　　<div　class="p-2　border">Элемент флекс 12</div>
　　　　<div　class="p-2　border">Элемент флекс 13</div>
　　　　<div　class="p-2　border">Элемент флекс 14</div>
　　　　<div　class="p-2　border">Элемент флекс 15</div>
　　　　<div　class="p-2　border">Элемент флекс 16</div>
　　　　<div　class="p-2　border">Элемент флекс 17</div>
　　　　<div　class="p-2　border">Элемент флекс 18</div>
　　　　<div　class="p-2　border">Элемент флекс 19</div>
　　　　<div　class="p-2　border">Элемент флекс 20</div>
　　　　<div class="p-2 border">Flex item 21</div>
　　　　<div class="p-2 border">Flex item 22</div>
　　　　<div class="p-2 border">Flex item 23</div>
　　　　<div class="p-2 border">Flex item 24</div>
　　　　<div class="p-2 border">Flex item 25</div>
　　</div>
　　<br>
　　<p>.align-content-end:</p>
　　<div class="d-flex flex-wrap align-content-end bg-light" style="height:300px">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border">Flex item 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　　　<div　class="p-2　border">Элемент флекс 4</div>
　　　　<div　class="p-2　border">Элемент флекс 5</div>
　　　　<div　class="p-2　border">Элемент флекс 6</div>
　　　　<div　class="p-2　border">Элемент флекс 7</div>
　　　　<div　class="p-2　border">Элемент флекс 8</div>
　　　　<div　class="p-2　border">Элемент флекс 9</div>
　　　　<div　class="p-2　border">Элемент флекс 10</div>
　　　　<div　class="p-2　border">Элемент флекс 11</div>
　　　　<div　class="p-2　border">Элемент флекс 12</div>
　　　　<div　class="p-2　border">Элемент флекс 13</div>
　　　　<div　class="p-2　border">Элемент флекс 14</div>
　　　　<div　class="p-2　border">Элемент флекс 15</div>
　　　　<div　class="p-2　border">Элемент флекс 16</div>
　　　　<div　class="p-2　border">Элемент флекс 17</div>
　　　　<div　class="p-2　border">Элемент флекс 18</div>
　　　　<div　class="p-2　border">Элемент флекс 19</div>
　　　　<div　class="p-2　border">Элемент флекс 20</div>
　　　　<div class="p-2 border">Flex item 21</div>
　　　　<div class="p-2 border">Flex item 22</div>
　　　　<div class="p-2 border">Flex item 23</div>
　　　　<div class="p-2 border">Flex item 24</div>
　　　　<div class="p-2 border">Flex item 25</div>
　　</div>
　　<br>
　　<p>.align-content-center:</p>
　　<div class="d-flex flex-wrap align-content-center bg-light" style="height:300px">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border">Flex item 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　　　<div　class="p-2　border">Элемент флекс 4</div>
　　　　<div　class="p-2　border">Элемент флекс 5</div>
　　　　<div　class="p-2　border">Элемент флекс 6</div>
　　　　<div　class="p-2　border">Элемент флекс 7</div>
　　　　<div　class="p-2　border">Элемент флекс 8</div>
　　　　<div　class="p-2　border">Элемент флекс 9</div>
　　　　<div　class="p-2　border">Элемент флекс 10</div>
　　　　<div　class="p-2　border">Элемент флекс 11</div>
　　　　<div　class="p-2　border">Элемент флекс 12</div>
　　　　<div　class="p-2　border">Элемент флекс 13</div>
　　　　<div　class="p-2　border">Элемент флекс 14</div>
　　　　<div　class="p-2　border">Элемент флекс 15</div>
　　　　<div　class="p-2　border">Элемент флекс 16</div>
　　　　<div　class="p-2　border">Элемент флекс 17</div>
　　　　<div　class="p-2　border">Элемент флекс 18</div>
　　　　<div　class="p-2　border">Элемент флекс 19</div>
　　　　<div　class="p-2　border">Элемент флекс 20</div>
　　　　<div class="p-2 border">Flex item 21</div>
　　　　<div class="p-2 border">Flex item 22</div>
　　　　<div class="p-2 border">Flex item 23</div>
　　　　<div class="p-2 border">Flex item 24</div>
　　　　<div class="p-2 border">Flex item 25</div>
　　</div>
　　<br>
　　<p>.align-content-around:</p>
　　<div　class="d-flex　flex-wrap　align-content-around　bg-light"　style="height:300px">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border">Flex item 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　　　<div　class="p-2　border">Элемент флекс 4</div>
　　　　<div　class="p-2　border">Элемент флекс 5</div>
　　　　<div　class="p-2　border">Элемент флекс 6</div>
　　　　<div　class="p-2　border">Элемент флекс 7</div>
　　　　<div　class="p-2　border">Элемент флекс 8</div>
　　　　<div　class="p-2　border">Элемент флекс 9</div>
　　　　<div　class="p-2　border">Элемент флекс 10</div>
　　　　<div　class="p-2　border">Элемент флекс 11</div>
　　　　<div　class="p-2　border">Элемент флекс 12</div>
　　　　<div　class="p-2　border">Элемент флекс 13</div>
　　　　<div　class="p-2　border">Элемент флекс 14</div>
　　　　<div　class="p-2　border">Элемент флекс 15</div>
　　　　<div　class="p-2　border">Элемент флекс 16</div>
　　　　<div　class="p-2　border">Элемент флекс 17</div>
　　　　<div　class="p-2　border">Элемент флекс 18</div>
　　　　<div　class="p-2　border">Элемент флекс 19</div>
　　　　<div　class="p-2　border">Элемент флекс 20</div>
　　　　<div class="p-2 border">Flex item 21</div>
　　　　<div class="p-2 border">Flex item 22</div>
　　　　<div class="p-2 border">Flex item 23</div>
　　　　<div class="p-2 border">Flex item 24</div>
　　　　<div class="p-2 border">Flex item 25</div>
　　</div>
　　<br>
　　<p>.align-content-stretch:</p>
　　<div　class="d-flex　flex-wrap　align-content-stretch　bg-light"　style="height:300px">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border">Flex item 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　　　<div　class="p-2　border">Элемент флекс 4</div>
　　　　<div　class="p-2　border">Элемент флекс 5</div>
　　　　<div　class="p-2　border">Элемент флекс 6</div>
　　　　<div　class="p-2　border">Элемент флекс 7</div>
　　　　<div　class="p-2　border">Элемент флекс 8</div>
　　　　<div　class="p-2　border">Элемент флекс 9</div>
　　　　<div　class="p-2　border">Элемент флекс 10</div>
　　　　<div　class="p-2　border">Элемент флекс 11</div>
　　　　<div　class="p-2　border">Элемент флекс 12</div>
　　　　<div　class="p-2　border">Элемент флекс 13</div>
　　　　<div　class="p-2　border">Элемент флекс 14</div>
　　　　<div　class="p-2　border">Элемент флекс 15</div>
　　　　<div　class="p-2　border">Элемент флекс 16</div>
　　　　<div　class="p-2　border">Элемент флекс 17</div>
　　　　<div　class="p-2　border">Элемент флекс 18</div>
　　　　<div　class="p-2　border">Элемент флекс 19</div>
　　　　<div　class="p-2　border">Элемент флекс 20</div>
　　　　<div class="p-2 border">Flex item 21</div>
　　　　<div class="p-2 border">Flex item 22</div>
　　　　<div class="p-2 border">Flex item 23</div>
　　　　<div class="p-2 border">Flex item 24</div>
　　　　<div class="p-2 border">Flex item 25</div>
　　</div>
　　<br>
</div>
</body>
</html>
Проверьте, ‹/›

Результат выполнения будет следующим:


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

Чтобы настроить выравнивание единичного строкового подэлемента, можно использовать класс .align-items-* для управления, включающий значения:.align-items-start, .align-items-end, .align-items-center, .align-items-baseline и .align-items-stretch (по умолчанию).

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>Выравнивание подэлементов</h2>
　　<p>Чтобы настроить выравнивание единичного строкового подэлемента, можно использовать класс .align-content-* для управления.</p>
　　<p>.align-items-start:</p>
　　<div class="d-flex align-items-start bg-light" style="height:150px">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border">Flex item 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　</div>
　　<br>
　　<p>.align-items-end:</p>
　　<div class="d-flex align-items-end bg-light" style="height:150px">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border">Flex item 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　</div>
　　<br>
　　<p>.align-items-center:</p>
　　<div class="d-flex align-items-center bg-light" style="height:150px">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border">Flex item 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　</div>
　　<br>
　　<p>.align-items-baseline:</p>
　　<div class="d-flex align-items-baseline bg-light" style="height:150px">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border">Flex item 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　</div>
　　<br>
　　<p>.align-items-stretch (по умолчанию):</p>
　　<div class="d-flex align-items-stretch bg-light" style="height:150px">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border">Flex item 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　</div>
　　<br>
</div>
</body>
</html>
Проверьте, ‹/›

Результат выполнения будет следующим:

指定子元素对齐

如果要设置指定子元素对齐，可以使用 .align-self-* 类来控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)。

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>Align Self</h2>
　　<p>如果要设置指定子元素对齐，可以使用　.align-self-*　类来控制。</p>
　　<p>.align-self-start:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div　class="p-2　border　align-self-start">Flex item 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　</div>
　　<br>
　　<p>.align-self-end:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div　class="p-2　border　align-self-end">Flex item 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　</div>
　　<br>
　　<p>.align-self-center:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border align-self-center">Элемент flex 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　</div>
　　<br>
　　<p>.align-self-baseline:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border align-self-baseline">Элемент flex 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　</div>
　　<br>
　　<p>.align-self-stretch (по умолчанию):</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2 border">Элемент flex 1</div>
　　　　<div class="p-2 border align-self-stretch">Элемент flex 2</div>
　　　　<div class="p-2 border">Элемент flex 3</div>
　　</div>
　　<br>
</div>
</body>
</html>
Проверьте, ‹/›

Результат выполнения будет следующим:

Адаптивные flex классы

Мы можем устанавливать класс flex в зависимости от различных устройств, чтобы реализовать адаптивную разметку страницы, значения * в таблице могут быть: sm, md, lg или xl, что соответствует малым, средним, большим и超大ным устройствам.

КлассПримерРеализация
Эластичный контейнер
.d-*-flexВ зависимости от разных экранных устройств создавать контейнер эластичного блокаПопробуйте 　
Направление
.flex-*-rowВ зависимости от разных экранных устройств отображать эластичные подэлементы в горизонтальном направленииПопробуйте 　
.flex-*-columnВ зависимости от разных экранных устройств отображать эластичные подэлементы в вертикальном направленииПопробуйте 　
Выравнивание содержимого
.justify-content-*-startВ зависимости от разных экранных устройств отображать эластичные подэлементы в начале (слева)Попробуйте 　
.justify-content-*-centerВ зависимости от разных экранных устройств центрировать подэлементы в контейнере flexПопробуйте 　
.justify-content-*-aroundВ зависимости от разных экранных устройств использовать "around" для отображения эластичных подэлементовПопробуйте 　
Расширение
.flex-*-grow-0Разные экранные устройства не устанавливают расширение　
.flex-*-grow-1Разные экранные устройства устанавливают расширение　
Сжатие
.flex-*-shrink-0Разные экранные устройства не устанавливают сжатие　
.flex-*-shrink-1Разные экранные устройства устанавливают сжатие　
Обертка
.flex-*-nowrapНе устанавливать 包装 элементов в зависимости от типа экрана устройстваПопробуйте 　
.flex-*-wrap-reverseОбратное включение элементов в зависимости от типа экрана устройстваПопробуйте 　
.align-content-*-endВ зависимости от типа экрана устройства,堆积 элементов в концеПопробуйте 　
.align-content-*-aroundВ зависимости от типа экрана устройства, использовать "around" для стека элементовПопробуйте 　
Выравнивание элементов
.align-items-*-startВ зависимости от типа экрана устройства, отображать элементы в начале на одном ряду.Попробуйте 　
.align-items-*-centerВ зависимости от типа экрана устройства, отображать элементы по центру на одном ряду.Попробуйте 　
.align-items-*-stretchВ зависимости от типа экрана устройства, расширять высоту элемента и отображать его на одном ряду.Попробуйте 　
.align-self-*-endВ зависимости от типа экрана устройства, отображать отдельный подэлемент в концеПопробуйте 　
.align-self-*-baselineВ зависимости от типа экрана устройства, отображать отдельный подэлемент на базовой линииПопробуйте 　
Медиа-объекты Bootstrap4Маленькие инструменты Bootstrap4