新設トップに戻るユーティリティFlexユーティリティBootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。可変性の高いFlexユーティリティを使用して、グリッドカラム、ナビゲーション、コンポーネントなどのレイアウト、配置、サイズがすばやく管理可能。複雑な実装では、カスタムCSSが必要な場合がある。behaviors)表示ユーティリティを適用してFlexコンテナを作成し、直接の子要素をFlexアイテムに変換。Flexコンテナおよびアイテムは、追加のFlexプロパティを使用してさらに変更可能。レスポンシブ対応版も存在。xl(特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる設定方向(Directionmns)方向ユーティリティを使用してFlexコンテナ内のFlexアイテムの方向を設定。あるため、ここでは左から横並びのクラスは省略可能だが、(レスポンシブなレイアウトなどで)この値を明示的に設定する必要がある場合がある。使用して右から横並びを開始する。使用して下から縦並びを開始する。レスポンシブ対応版もそれぞれ存在。場合はy軸)上のFlexアイテムの配置を変更。レスポンシブ対応版も存在。場合はx軸)上のFlexアイテムの配置を変更。stretch(ブラウザのデフォルト)から選択。レスポンシブ対応版も存在。場合はx軸)上の配置を個別に変更。stretch(ブラウザのデフォルト)から選択。レスポンシブ対応版も存在。auto)を使用して、それらのコンテンツを等幅(またはコンテンツがその枠線の枠を超えない場合は等幅)に強制的に移動し、使用可能なすべての水平スペースを占有。入っているアイテムに均等に配分。ユーティリティを使用して、使用可能なスペースを埋めるためにFlexアイテムの能力を切り替え可能。1)要素は使用可能なすべてのスペースを使用し、残りの2つのFlex要素は必要最小限のスペースを使用。入っているアイテムに移動。ユーティリティを使用して、必要に応じてFlexアイテムの収縮機能を切り替え可能。持つFlexアイテム1のスペースが増える。入っているアイテム)に移動。margins)Flexの整列と自動マージンを混在させると、Flexboxはかなり素晴らしい機能を提供する。自動マージンでFlexアイテムを制御する3つの例を以下に示す。デフォルト(自動マージンなし)、2つのアイテムを右側に分離(.mr-auto)、2つのアイテムを左側に分離(.ml-auto)の3パターン。値を持つFlexアイテムの自動マージンを正しくサポートしていない。詳細については、こちらのStackOverflowの回答に記載。混在させて、Flexアイテムをコンテナの垂直方向に移動させる。分離したい直後のアイテムに入れるFlexアイテムの折り返し(Wrap)FlexアイテムがFlexコンテナ内でどのように折り返すかを変更可能。使用した逆方向へ折り返しが選択可能。レスポンシブ対応版も存在。ユーティリティを使用して特定のFlexアイテムの表示順を変更。レスポンシブ対応版も存在。ユーティリティを使用して、Flexアイテムを交差軸上に整列させる。強制し、Flexアイテムの数を増やした。このプロパティは、折り返しのない単一行のFlexアイテムには影響しない。レスポンシブ対応版も存在。