フレックスボックス

フレックスボックスが登場する前は、ボックスを縦方向の中央に置くのにくふうが必要でした。display: flex を使えば、justify-content と align-items の二つの宣言ですみます。

一つの行か一つの列

フレックスボックス（CSS Flexible Box Layout モジュール）は、ボックスの集まりを一本の線にそって並べます。入れ物に display: flex を指定すると、その直接の子（フレックスアイテム）は縦に積み重ならず、横に並びます。メニューバー、ボタンの列、フッターを下にくっつけたいカードなどは、この宣言一つで作れます。フレックスボックスは一度に一つの次元、つまり行か列のどちらかだけを扱います。行と列をいっしょに扱いたいときは、ふつうは次の単元のグリッドのほうが向いています。

二つの軸

フレックスボックスでは、すべてを二つの軸で考えます。主軸はアイテムが並ぶ向きで、flex-direction で決まります。row（既定）か column です。交差軸は主軸と直角に交わります。justify-content は主軸にそってアイテムを配置します。flex-start、center、flex-end、space-between（最初と最後のアイテムを両端に置き、あいだを等しくあける）、space-around があります。align-items は交差軸の上の位置を決めます。stretch（既定。すべてのアイテムがいちばん高いものと同じ高さになる）、flex-start、center、flex-end です。つまり、justify-content: center と align-items: center で、ボックスを縦横どちらにも中央に置けます。

.bar {
  display: flex;
  justify-content: space-between;  /* logo left, menu right */
  align-items: center;             /* vertically centred */
  gap: 16px;                       /* space between items */
}
.cards { display: flex; flex-wrap: wrap; gap: 12px; }
.card  { flex: 1 1 200px; }        /* grow, shrink, start at 200px */

すき間と折り返し

gap はアイテムのあいだにだけ余白を入れ、外側の端には入れません。ふつうはこれが望みどおりで、マージンでは難しいところです。既定では、フレックスアイテムは一つの行にとどまり、つぶれてでも縮んでおさまろうとします。flex-wrap: wrap にすると、場所が足りないときに新しい行へ移ります。ノートパソコンでは四枚並ぶカードが、タブレットでは二枚ずつ二行、スマートフォンでは一列になります。メディアクエリはいりません。

アイテムがのびる・縮むしくみ

アイテムにつける flex 一括指定は三つの値をとります。flex-grow は、あまった場所をきょうだいと比べてどれだけとるか、flex-shrink は、場所が足りないときにどれだけ縮むか、flex-basis は、のび縮みする前のはじめの大きさです。flex: 1 1 200px は、200 ピクセルから始めて、grow が同じく 1 のほかのアイテムとあまった場所を等しく分けるという意味です。flex: 1 だけなら 1 1 0% の省略で、すべてのアイテムが同じ幅になります。一つのアイテムを flex-grow: 2、ほかを 1 にすると、そのアイテムはあまった場所をほかの 2 倍とります。

見た目の順番と本当の順番

フレックスボックスでは、flex-direction: row-reverse や order プロパティで、HTML にふれずにアイテムの表示順を変えられます。これは注意して使いましょう。キーボードのフォーカスやスクリーンリーダーは HTML の順番に従います。画面では Contact が Home より前にあるのに Tab キーで Home に先に移ると、キーボードを使う人は迷ってしまいます。順番が意味にかかわるときは、HTML で順番を変えましょう。