当サイトでは、普段は Vuetify 3 のUIコンポーネントについて書いている記事が多めですが
今回は前回、前々回に続いて　Vuetify 3 があらかじめ備えているcssクラス群について書いていきたいと思います。

前回は余白を調整するためのcssクラス群に関する内容をご紹介しましたが、
今回は「flexboxとして並べた要素を調整」する場合に使える
「flex系統のcssクラス群」について書いていきます。

なお、この記事を書いた際に Vue3, Vuetify3 を動作させている環境は次のとおりです。
参考までにご確認ください。
・Mac OS Montrey (12.3.1)
・Node.js v16.18.1
↑この Node.js のバージョンは、 Corepack が同梱されているバージョン( v16.10以降 )を使用することをお勧めします。

Vuetify 3 に定義されている、flex系統のclass

それでは早速、Vuetify 3 に定義されている、flex系統のcssクラス群について書いていきます。

Vuetifyでは、親要素に
d-flex
というclassを付与する事で、その子要素をflexboxとして並べる事ができます。

flexboxにはご存知の通り、その要素内での位置を決めるための
各種プロパティが存在します。

今回の記事では、 d-flex と組み合わせて使用する、
Vuetify 3 に定義されている「flexbox用のcssクラス群」について
使用頻度の高そうなものを挙げて書いていきたいと思います。

横方向の位置をどうするかを決める

display: flex 状態になった要素内での、
子要素の横方向の並べ方を指定するには jusitfy-content を使用しますよね。

Vuetifyでは、次の指定でこれを付与する事ができます。

<div class="d-flex justify-center">
  <v-card title="flex状態のv-card"></v-card>
  <v-card title="flex状態のv-card"></v-card>
  <v-card title="flex状態のv-card"></v-card>
</div>

↑flex状態となった3枚の v-card のflexbox要素内での位置を、
Vuetify 3 に定義されているcssクラスで指定しています。
1行目の justify-center がそれに該当するclassです。
上記の例の様に、d-flex を付与した要素と同じ要素に指定します。

Vuetify 3 に定義されている
justify-content系のclassは、上記を含め、次のものがあります。

.justify-start … 左寄せで並ぶ
.justify-end … 右寄せで並ぶ
.justify-center … 中央寄せで並ぶ
.justify-space-between … 各要素を均等に配置、左右にガター(親要素との余白)なし
.justify-space-around … 各要素を均等に配置、左右にガター(親要素との余白)あり。ガターは均等配置された余白の半分の値になる

モバイルサイズを超えたら均等配置、PCサイズを超えたら左寄せ、といった指定

前回や、前々回の記事でも出てきた部分ですが、
こちらのjustify系統のclassでも、もちろん「Vuetify 3 に定義されたブレークポイント毎での変化」をさせる指定が可能です。
具体的には、次の様に指定します。

<div class="d-flex justify-center justify-sm-space-between justify-lg-start">
  <v-card title="flex状態のv-card"></v-card>
  <v-card title="flex状態のv-card"></v-card>
  <v-card title="flex状態のv-card"></v-card>
</div>

↑この例では、基本が中央揃え、
600pxを超えたらspace-between,
1280pxを超えたら左揃え、
という指定になります。

縦方向の位置をどうするかを決める

続いて、justify-content と同じくflexboxレイアウトでよく使う
「flexbox内での縦方向の位置指定」についてです。

これは、align-items というcssプロパティを親要素に指定する事で定義できますが、

Vuetify 3 に定義されている align-items を使用するclassは次のとおりです。
.align-start … 上揃えで並ぶ
.align-end … 下揃えで並ぶ
.align-center … 縦方向の中央揃えで並ぶ
.align-baseline … 文字のベースラインで並ぶ
.align-stretch … flexbox内の縦方向に、margin等を考慮のうえ拡張されて並ぶ

↑基本の形は、justify-content の場合と同じですね。
もちろん、justify-content と同様の記法で
「モバイルサイズではベースラインで」、「PCサイズでは縦方向の中央揃えで」といった指定が可能です。

<div class="d-flex align-start align-sm-baseline align-lg-center">
(...中略...)

↑この様に指定します。
基本は align-items: start,
600pxを超えたら align-items: baseline,
1280pxを超えたら align-items: center
という指定です。

その他のflexbox調整系のVuetifyのcssクラス群

ここまでのセクションでは、flexboxレイアウトで最も使う頻度が高いと思われる
横方向の位置、縦方向の位置を定義するcssクラスについて書いてきました。

この他にも、Vuetifyが持っているflexbox調整系cssクラス群はたくさんあります。

要素の順番を個別に指定できる order(order-{数値} の形で0〜12番まで指定可能),
flexbox内で折り返しを許可するかどうかの flex-wrap,
flexbox内での自動拡大、自動縮小を認めるかどうかの flex-grow, flex-shrink

などなど、flexboxレイアウトで想定される指定は
ほぼ全て網羅されて Vuetify 内に定義されています。

すべての詳細は、Vuetify公式ページに詳しく解説されていますので、
一読すると理解が深まるかと思います。
CSS Flex helpers — Vuetify

この記事のまとめ

当サイトでは、普段は Vuetify 3 のUIコンポーネントを中心に記事を書く事が多い印象ですが
前回の記事、
前々回の記事
に引き続いて今回も
「Vuetify 3 にあらかじめ定義されているcssクラス群」についての内容を書いてみました。

前回も書いた事ですが、Vuetify には、
今回ご紹介したFlexbox調整系統のcssクラス群の様に、
あらかじめ定義されているcssクラス群が多数あるので
それ単体で、Bootstrapのように
文字通り「UIフレームワーク」として運用する事が可能となっています。

今後もまた、Vuetify 3 のUIコンポーネントの記事と並行して
この他にも数多くあるcssクラス群についても、記事を書いていければと考えています。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。