［よくある質問］d-flexとrowの違いって？

前回のレッスンで、d-flexクラスを使った要素の並べ方を見てきました。
それよりももっと前にやった『Bootstrap5のグリッドを理解する』ではrowクラスでも、CSS Flexboxを使った横並びのレイアウトを試しましたよね。この２つは何が違うんだろう、と思われた方も多いかもしれません。

今回は、似て非なるこのクラスの違いを解説します。
実習はありませんし、ちょっとややこしい話になるので、軽く目を通すくらいで良いです。

• d-flexクラスとrowクラスの違い
• d-flexクラス
• rowクラス
• Gutters（ガター）について知ろう
• 1.containerとrowの関係
• 2.カラムの間隔を決めるガター

d-flexクラスとrowクラスの違い

d-flexクラス

簡単にdivタグを使って、d-flexクラスのスタイル指定を見てみましょう。

<div class="d-flex">d-flex</div>

CSSでは「display: flex」のみが設定されています。
ザ・ユーティリティ、といったCSSクラスですね。

rowクラス

次にrowクラスでも、同じ様に試してみます。

<div class="row">row</div>

rowというテキストが切れてしまっています。
CSSを見てみると、displayプロパティ以外にも様々なスタイル指定が入っていることが分かります。

marginあたりの書き方は、そのままだと分かりにくいですね。
検証ツールのComputed（計算済み）タブの方で見てみましょう。

そうすると、左右のmarginが-12pxされていることが分かります。
これが、rowという文字が切れてしまっている原因です。

Gutters（ガター）について知ろう

rowクラスが、わざわざ親要素からはみ出すようなスタイルが指定されている理由。
それは、rowクラスがBootstrapのグリッドシステムで「レイアウトを行う際のパーツ」として設計されているためです。

より厳密に言うと、ガターと呼ばれるカラム間のpaddingをスムーズに調整するためのCSS設計です。

1.containerとrowの関係

『Bootstrap5のグリッドを理解する』で使ったコードも、rowクラスを使っていました。
しかし、こちらは、文字や画像がはみ出して切れてしまう、ということは起こっていませんでしたよね。

grid.html

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <img src="images/test.jpg" alt="" class="img-fluid">
    </div>
    <div class="col-md-6">
      <h1>sampletext</h1>
      <p>sample text...
      </p>
    </div>
  </div>
</div>

rowクラスで、左右のmarginが-12pxされているのは同じ。
containerクラスで、左右に12pxずつのpaddingが設定されていますね。
コンテンツ幅を制限しない（全幅になる）container-fluidクラスでも、同様に左右paddingが設定されます。

このpaddingがあるおかげで、中にrowクラスの要素が入っても画面幅（表示領域）からコンテンツがはみ出しません。

実際に、先程のコードでも<div class="row">をcontainerクラスの要素で囲うと、はみ出さなくなります。

<div class="container">
  <div class="row">row</div>
</div>

2.カラムの間隔を決めるガター

『Bootstrap5のグリッドを理解する』で作ったHTMLファイルをもう一度見てみましょう。
左右カラム（画像・テキストを囲うdiv）には、それぞれpaddingが付いていますよね。

CSSを見てみると、下図の赤線部分でに左右paddingが設定されています。
セレクタで指定されているのはrowクラスの直下にある全要素（タグ）。HTMLタグで囲われたもの、全てに適用されるCSSです。

そして、肝心のpaddingの値部分には「var(--bs-gutter-x)」という書き方が使われています（CSS変数と言います）。
これが本題の、ガターの設定になります。

ガターについてはBootstrap公式ドキュメント「Gutters」のページで解説されています。
説明によると、ガター（--bs-gutter-xと--bs-gutter-x）の初期値は1.5rem(24px)。
右と左にこの半分ずつ、つまり12pxずつの余白が付きます。

URL：https://getbootstrap.jp/docs/5.3/layout/gutters/

この余白はrowクラスと一緒に、ガターを設定するためのクラスを指定すると変わります。
例えば、カラム間にもっと余白を入れたい時は、g-5クラスを入れます。

grid.html

<div class="container">
    <div class="row g-5">
        ...以下略

ブラウザで見ると、カラムの間が広くなっています。
stylesを確認すると--bs-gutter-x、--bs-gutter-yを3rem(48px)に上書きしていることが分かります。

rowクラスのネガティブマージンも、左右24pxずつと大きくなっています。

反対に、ガターを無くすg-0クラスを指定した場合。
こちらは、カラム間のスペースも、rowクラスのネガティブマージンも、全て無くなります。

ガターで設定した数値を、rowクラスの要素とその子要素に反映させる仕組み。
これによって、Bootstrap5のグリッドシステムでは手軽に均一な余白設定が出来るのです。

また、以下コードのように見出しなどをrowクラスの外側に置いていても、左右両端の位置が揃うのでページ全体が整って見えます。

<div class="container">
    <h1>サンプルテキスト</h1>
    <div class="row g-5">
        ...以下略