Flex(フレックス)ユーティリティの使い方を徹底解説2024年5月1日SHAREポストシェアはてブLINE記事にはプロモーションが含まれる場合があります。ここではBootstrap4系でのフレックスボックス(flex)の使い方を説明していきます。ブートストラップの導入方法と基本を徹底解説!」をご参照ください。Order-{番号}まとめFlexユーティリティーFlexユーティリティーとはBootstrap4から新しく実装されたFlexユーティリティは、cssのflexbox(フレックスボックス)と呼ばれるレイアウトモードを使用することができるユーティリティです。従来のfloatを使ったレイアウトよりも柔軟に要素を配置することができます。合わせて読みたい記事Flexユーティリティーについて理解するために、先にCSSのflexbox(フレックスボックス)の概念と使い方を学習しておくことをおすすめします。これにより、親要素がflexコンテナとなり、子要素がflexアイテムとなります。5</div></div>■d-flexクラスと、d-flex-inlineのcss(bootstrap.css)また、Bootstrap4ではブレークポイントに合わせてflexboxを設けることができます。flex-{方向}flex-{方向}クラス指定すると、flexコンテナの主軸の方向を指定することができます。flexアイテムはこの主軸の方向に沿って配置されます。5</div></div></div>なお、flex-row(デフォルト値)の場合は、省略されることも多いです。ブレイクポイントに応じて、flex-{sm,mdlg,xl}-{方向}クラスも定義されています。クラスを指定すると、768px以上の画面幅でflexアイテムを右から左に配置することができます。justify-content-{配置設定}flexboxは2つの軸を持っています。主軸と、主軸に対して垂直な軸(交差軸)です。以下の図はそれぞれの始点と終点を示したものです。以下は、水平方向flex-rowの場合の、主軸と交差軸です。justify-content-***クラスを使用すると、flexコンテナの主軸に沿って、flexアイテムをどのように配置するかを設定できます。***には、strat(始点)、end(終点)、center(中央)、between(両はしから均等)、around(等間隔)から選択できます。クラスレスポンシブ対応クラスjustify-content-start主軸の始点に配置する(デフォルト)justify-content-end主軸の終点に配置するjustify-content-center主軸の中央に配置するjustify-content-between両端から均等に配置するjustify-content-around主軸に対し均等間隔に配置する■主軸方向がrow(デフォルト)の場合は、水平方向の配置を制御します。5</div></div></div>flex-columnの場合は、主軸が垂直方向になりますので、垂直方向の配置を制御することになります。5</div></div></div>ブレークポイントを設けたい場合は、justify-content-{sm|md|lg|xl}-***のように記述することができます。align-items-{配置設定}align-items-{配置設定}クラスを利用すると、flexコンテナの交差軸に沿って、flexアイテムをどのように配置するかを設定できます。クラスレスポンシブ対応クラスalign-items-start交差軸の始点に配置する(デフォルト)align-items-end交差軸の終点に配置するalign-items-center交差軸の中央に配置するalign-items-baseline交差軸のベースラインに配置するalign-items-stretch交差軸の始点から終点まで伸縮する■主軸が水平方向(flex-row)の場合、垂直方向の交差軸に対して配置を制御します。5</div></div></div>主軸が垂直方向(flex-column)の場合、水平方向の交差軸に対して配置を制御します。5</div></div></div>ブレークポイントを設けたい場合は、align-items-{sm|md|lg|xl}-***のように記述することができます。5(order-4)</div></div></div>ブレークポイントを設けたい場合は、order-{sm|md|lg|xl}-{0〜最大12の番号}のように記述することができます。まとめいかがでしたでしょうか。今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)の4のFlexユーティリティの使い方の基本をご紹介しました。Flexユーティリティーは、flexbox(フレックスボックス)の概念と仕組みを利用したユーティリティーですので、CSSのdisplay:flexの使い方を先に学習していると理解しやすいかと思います。ここでは割愛しますが、他にも、align-self、flex-grow(shrink)-*、flex-fill、align-content、flex-wrapなど色々な使い方があります。公式サイトにも使い方の詳細が掲載されていますので、参考にしながら活用してみてください。ブートストラップの導入方法と基本を徹底解説!今回は、以上になります。最後までご覧いただきありがとうございました。