CSS GRIDを勉強してみる(6) - グリッドとフレックスボックス

ここからは、

developer.mozilla.org

の内容に入る。

グリッドとフレックスボックスの違いについてが最初のテーマ。 しかし、音に聞くBootstrapとはなんぞと遅まきながら調べてみたら、 最近はCSSのグリッドもいいらしいぜという経緯で勉強をはじめているため、 フレックスボックスに関する知識も皆無である。困った。 とりあえず、わからないことは調べたり飛ばしたりしながら進むことにする。

まず、前回まで使っていたHTMLとCSSを綺麗にして、ここからスタートすることにする。

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

.wrapper {
  color: white;

  display: grid;
}

.box1 {
  background-color: #660000;
  opacity: 0.5;
}

.box2 {
  background-color: #006600;
  opacity: 0.5;
}

.box3 {
  background-color: #000066;
  opacity: 0.5;
}

.box4 {
  background-color: #666600;
  opacity: 0.5;
}

.box5 {
  background-color: #660066;
  opacity: 0.5;
}

レンダリング結果はこうだ

開発者ツールによりグリッド線が引かれているが、 レンダリング結果自体はdisplay:を設定しない場合と、 見た目は変わらない。

これを横に並べたかったら、こうする。grid-template-columnsを設定するのだ。

一方、display: flex;にすると、こうなる。

横に並んでいるので、グリッドの場合に似ている。

CSSを以下のように指定してみよう。

wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper > div {
  flex: 1 1 200px;
}

flex: 1 1 200pxは、flex-grow, flex-shrink, flex-basisをまとめて指定している。 それぞれの意味は・・・今読んでみたけどなんとなくしかわからなかったので省略。

レンダリング結果はこうなる。

折り返した行ごとにレイアウトが起きているので、1行目と2行目では幅が異なっている。

ちなみに、wrapさせないとこうなる。