CSS、「display: flex;」と「display: grid;」を使って覚える！ - 初心者が最初に覚えるべき5つのパターン

「display: flex;」「display: grid;」について覚えなきゃ、でも時間ない……と思っている人向けの記事です。

「とりあえず使う」ことができるように、よく使う便利なパターンをメモしておきます。
ここにあるものコピペするだけで、flexやgridについては50%くらいは使えている状態になると思いますので、乗り遅れている方はこの機会に覚えてみてください。

flex: 子要素を縦横の中央配置

<div class="parent">
  <span>あああ</span>
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

position: absolute; + margin: auto;での中央配置の場合、子要素に横幅 (width) や高さ (height) を指定する必要があります。

背景画像の前面にタイトル文字が重なっているレイアウトにおいて、タイトル文字が1行なのか2行なのかによってheightを都度設定しなければならず、不便でした。display: flex;での上下の中央配置は非常に便利です。

「justify-content」や「align-items」に指定できる値として、flex-start、flex-end、baselineあたりもよく使うので、変更してみてどのように挙動するかを見てみてください。

flex: 子要素を均等幅で横並びにする

<div class="parent">
  <div class="child">あ</div>
  <div class="child">い</div>
  <div class="child">う</div>
  <div class="child">え</div>
</div>

.parent {
  display: flex;
}
.parent > .child {
  flex: 1 1 0%;
}

flex: 1 1 0%;は、以下の記述のショートハンドです。
flex-grow: 1;　　横幅が余ったときに分配される割合
flex-shrink: 1; 　　横幅が足りないとき負担する割合
flex-basis: 0%;　　基準となる横幅

すべての子要素に「flex: 1 1 0%;」を指定した場合、以下の順番で計算がされているようなイメージです。
1. すべての子要素の横幅が0%、余っている横幅が100%
2. 余っている横幅100%を、子要素4つで分け合うので横幅25%

flex: 子要素を左右に配置

<div class="xxxx-header">
 <h2 class="title">タイトルタイトル</h2>
 <a class="btn" href="">ボタン</a>
</div>

.xxxx-header {
  display: flex;
  align-items: center;
}
.xxxx-header > .btn {
  margin-left: auto; /* .btnが右端に配置される */
}

「display: flex;」を指定した子要素は、margin-xxxx: auto;を指定することで右寄せや下寄せにしたりすることができるので便利です。

私見としてはには、margin-xxxx: auto;を使用した方法をマスターできれば、justify-content: between;を覚える優先度はよっぽど熟練してきてからでいいのではと考えています。

flex: 左側に画像、右側にテキスト

<div class="xxxx">
  <div class="img">
    <img src="" alt="">
  </div>
  <div class="content">
    <h2>タイトルタイトルタイトル</h2>
    <p>
      テキストテキスト、テキストテキストテキストテキスト。テキストテキスト。<br>
      テキストテキストテキストテキスト。
     </p>
  </div>
</div>

.xxxx {
  display: flex;
}
.xxxx > .img {
  margin-right: 20px; /* 余白 */
  flex: 0 0 200px; /* 横幅は200pxで固定 */
}
.xxxx > .content {
  flex: 1 1 0%; /* 横幅は伸縮 */
}

「flex: 0 0 固定値;」と「flex: 1 1 0%;」の組み合わせにより、例えば「画像は固定幅、文字のエリアだけ可変にする」といった実装が可能になります。

grid: 子要素を均等サイズでグリッド状に配置

<div class="parent">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
  <div>え</div>
  <div>お</div>
  <div>か</div>
  <div>き</div>
</div>

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 40px 30px; /* 余白 */
}

display: grid;は、まずはこれだけ覚えておけば十分と考えます。

(ヘッダー、サイドバー、フッターなどをレイアウトしようとするサンプルをよく目にするのですが、そこにdisplay: grid;を使用するメリットを私はあまり感じていません。)

注意点として、IE11では上記のシンプルな記述でなくなってしまいます。あとからIE11に対応しなければならないことがあり得る場合、泥沼化する恐れがありますので、お気をつけください。

まとめ: 全部覚えようとしなくてOK

「display: flex;」と「display: grid;」は、できることが多く、というより多すぎて初学者にとってはハードルが高いと思いますが、普段からよく使うものだけに絞ると、パターンは意外に少ないので怖がらず、まずは使ってみてください。

最後に、今回登場したCSSプロパティをメモしておきます。

flex: 親要素に指定
display: flex;
justify-content: center; /* そのほかflex-start、flex-endなど */
align-items: center; /* そのほかflex-start、flex-endなど */

flex: 子要素に指定
flex: 1 1 0%; /* 伸び縮みさせたいとき */
flex: 0 0 固定値; /* 伸び縮みさせたくないとき */

grid: 親要素に指定
display: grid;
grid-gap: 40px 30px; /* 余白 */
grid-template-columns: 1fr 1fr 1fr; /* サイズ (横幅) */

ではまた！