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 及びその以下のバージョンでは、エラストイボックスをサポートしていないため、IEとの互換性が必要な場合は8-9を使用してください 3。

以下の例では、d-flex クラスを使用して、エラストイボックスコンテナを作成し、3つのエラストイ子要素を設定します：

!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 クラスを使用して、エラストイボックスコンテナを作成し、3つのエラストイ子要素を設定します：</p>
　　<div　class="d-flex p-3　bg-secondary text-white">　　
　　　　<div　class="p-2　bg-info">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　bg-primary">フレックスアイテム　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">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　bg-primary">フレックスアイテム　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">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　bg-primary">フレックスアイテム　3</div>
　　</div>
　　<p>.flex-row-reverse 右対齐方向を設定します:</p>
　　<div　class="d-flex　flex-row-reverse　bg-secondary">
　　　　<div　class="p-2　bg-info">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　bg-primary">フレックスアイテム　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">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　bg-primary">フレックスアイテム　3</div>
　　</div>
　　<p>.flex-column-reverse　クラスはフレックス子要素の垂直方向に反転表示を設定するために使用されます：</p>
　　<div　class="d-flex　flex-column-reverse">
　　　　<div　class="p-2　bg-info">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　bg-primary">フレックスアイテム　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">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　bg-primary">フレックスアイテム　3</div>
　　</div>
　　<div　class="d-flex　justify-content-end　bg-secondary　mb-3">
　　　　<div　class="p-2　bg-info">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　bg-primary">フレックスアイテム　3</div>
　　</div>
　　<div　class="d-flex　justify-content-center　bg-secondary　mb-3">
　　　　<div　class="p-2　bg-info">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　bg-primary">フレックスアイテム　3</div>
　　</div>
　　<div　class="d-flex　justify-content-between　bg-secondary　mb-3">
　　　　<div　class="p-2　bg-info">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　bg-primary">フレックスアイテム　3</div>
　　</div>
　　<div　class="d-flex　justify-content-around　bg-secondary　mb-3">
　　　　<div　class="p-2　bg-info">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　bg-primary">フレックスアイテム　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">フレックスアイテム　1</div>
　　　　<div　class="p-2　flex-fill　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　flex-fill　bg-primary">フレックスアイテム　3</div>
　　</div>
　　<p>不使用　.flex-fill　クラスの例：</p>
　　<div　class="d-flex　mb-3　bg-secondary">
　　　　<div　class="p-2　bg-info">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　bg-primary">フレックスアイテム　3</div>
　　</div>
</div>
</body>
</html>
テストしてみてください ‹/›

実行結果は以下の通りです：

拡張

.flex-grow-1 　子要素が残りのスペースを使用するように設定するために使用されます。以下の例では、最初の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>.flex-grow-1　子要素が残りのスペースを使用するように設定するために使用されます：</p>
　　<div　class="d-flex　mb-3">
　　　　<div　class="p-2　bg-info">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　flex-grow-1　bg-primary">フレックスアイテム　3</div>
　　</div>
　　<p>不使用　.flex-grow-1　例：</p>
　　<div　class="d-flex　mb-3　bg-secondary">
　　　　<div　class="p-2　bg-info">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　bg-primary">フレックスアイテム　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">フレックスアイテム　1</div>
　　　　<div　class="p-2　order-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　order-1　bg-primary">フレックスアイテム　3</div>
　　</div>
</div>
</body>
</html>
テストしてみてください ‹/›

実行結果は以下の通りです：

外側マージン

.mr-auto　クラスは子要素の右外側マージンを自動的に設定できます： auto、つまりマージン-right: auto!important;、.ml-auto　クラスは子要素の左外側マージンを自動的に設定できます： auto、つまりマージン-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　クラスは子要素の右外側マージンを自動的に設定できます：.ml-auto　クラスは子要素の左外側マージンを自動的に設定できます：</p>
　　<div　class="d-flex　mb-3　bg-secondary">
　　　　<div　class="p-2　mr-auto　bg-info">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　bg-primary">フレックスアイテム　3</div>
　　</div>
　　<div　class="d-flex　mb-3　bg-secondary">
　　　　<div　class="p-2　　bg-info">フレックスアイテム　1</div>
　　　　<div　class="p-2　bg-warning">フレックスアイテム　2</div>
　　　　<div　class="p-2　ml-auto　bg-primary">フレックスアイテム　3</div>
　　</div>
</div>
</body>
</html>
テストしてみてください ‹/›

実行結果は以下の通りです：

パッケージ

フレックスコンテナ内に含まれる子要素を使用するための以下の3つのクラスがあります：.flex-nowrap (デフォルト), .flex-wrap または .flex-wrap-reverse。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>包む</h2>
　　<p>エラストイコンテナ内にエラストイ子要素を包むには、以下の3つのクラスを使用できます：　.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　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　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　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　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　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　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">Flex　item　29</div>
　　　　<div　class="p-2　border">Flex　item　30</div>
　　　　<div　class="p-2　border">Flex　item　31</div>
　　　　<div　class="p-2　border">Flex　item　32</div>
　　　　<div　class="p-2　border">Flex　item　33</div>
　　　　<div　class="p-2　border">Flex　item　34</div>
　　　　<div　class="p-2　border">Flex　item　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　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　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　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　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　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　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　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　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　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　　　<div　class="p-2　border">Flex　item　4</div>
　　　　<div　class="p-2　border">Flex　item　5</div>
　　　　<div　class="p-2　border">Flex　item　6</div>
　　　　<div　class="p-2　border">Flex　item　7</div>
　　　　<div　class="p-2　border">Flex　item　8</div>
　　　　<div　class="p-2　border">Flex　item　9</div>
　　　　<div　class="p-2　border">Flex　item　10</div>
　　　　<div　class="p-2　border">Flex　item　11</div>
　　　　<div　class="p-2　border">Flex　item　12</div>
　　　　<div　class="p-2　border">Flex　item　13　</div>
　　　　<div　class="p-2　border">Flex　item　14</div>
　　　　<div　class="p-2　border">Flex　item　15</div>
　　　　<div　class="p-2　border">Flex　item　16</div>
　　　　<div　class="p-2　border">Flex　item　17</div>
　　　　<div　class="p-2　border">Flex　item　18</div>
　　　　<div　class="p-2　border">Flex　item　19</div>
　　　　<div　class="p-2　border">Flex　item　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　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　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　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　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　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　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　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　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　item　1</div>
　　　　<div　class="p-2　border">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　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　item　1</div>
　　　　<div　class="p-2　border　align-self-start">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　</div>
　　<br>
　　<p>.align-self-end:</p>
　　<div　class="d-flex　bg-light"　style="height:150px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border　align-self-end">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　</div>
　　<br>
　　<p>.align-self-center:</p>
　　<div　class="d-flex　bg-light"　style="height:150px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border　align-self-center">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　</div>
　　<br>
　　<p>.align-self-baseline:</p>
　　<div　class="d-flex　bg-light"　style="height:150px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border　align-self-baseline">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　</div>
　　<br>
　　<p>.align-self-stretch　(デフォルト):</p>
　　<div　class="d-flex　bg-light"　style="height:150px">
　　　　<div　class="p-2　border">Flex　item　1</div>
　　　　<div　class="p-2　border　align-self-stretch">Flex　item　2</div>
　　　　<div　class="p-2　border">Flex　item　3</div>
　　</div>
　　<br>
</div>
</body>
</html>
テストしてみてください ‹/›

実行結果は以下の通りです：

レスポンシブフレックスクラス

異なるデバイスに応じて、フレックスクラスを設定し、ページのレスポンシブレイアウトを実現できます。以下のテーブルでは、 * 指定できる値は：sm, md, lg、xlで、それぞれ小型デバイス、中型デバイス、大型デバイス、超大型デバイスに対応しています。

クラス例実現
エラストコンテナ
.d-*-flex異なるスクリーンデバイスに応じてエラストボックスコンテナを作成試してみてください 　
方向
.flex-*-row異なるスクリーンデバイスに応じて水平方向にエラストアイテムを表示試してみてください 　
.flex-*-column異なるスクリーンデバイスに応じて垂直方向にエラストアイテムを表示試してみてください 　
コンテンツのアライメント
.justify-content-*-start異なるスクリーンデバイスに応じてエラストアイテムを先頭に表示（左寄せ）試してみてください 　
.justify-content-*-center異なるスクリーンデバイスに応じてフレックスコンテナ内でアイテムを中央に表示試してみてください 　
.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 ユーティリティ