やったこと

過去レビューまとめ

CSS記述時に注意する点

1. レスポンシブを意識したHTML構成にしなくても、うまく設計とflex系のプロパティ当てることで大抵のことは解決できる

2. (min	max)-width系をうまく活用してみる

3. gapはcol-gapとrow-gapで向きをいじれる

特に1では無駄なdiv要素を増やすことがないようにしなくてはいけない

Flex-boxについて

もう一回MDNを読もう

フレックスボックスの基本概念

フレックスボックス 2 つの軸

フレックスボックスを使うときは 2 つの軸、つまり主軸 (main axis) と**交差軸 (cross axis) **の観点から考える必要があります。主軸は flex-direction プロパティによって定義され、交差軸は主軸に垂直に交わる軸です。

主軸は flex-direction によって定義され、4 種類の値をとることができます。

• row
• row-reverse
• column
• column-reverse

アクセシビリティの考慮

flex-direction プロパティを row-reverse または column-reverse の値で使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、画面リーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、画面リーダーの利用者は正しい読み上げ順序でアクセスすることができなくなります。

行の先頭と末尾

理解が必要なもう一つの重要事項は、フレックスボックスは文書の書字方向を仮定しないという点です。 CSS は過去には、左から右への横書きの書字方向に過度に偏っていました。最近のレイアウト方法は多様な書字方向に対応しており、したがってテキスト行が左上から始まり右に進み、新しい行が下に続くということを仮定しません。

もし flex-direction が row で言語が英語の場合、主軸の先頭は左で末尾は右になります。

一方で言語がもしアラビア語であった場合、主軸の先頭は右で末尾が左になります。

フレックスコンテナー

フレックスボックスを使ってレイアウトされる文書の領域は、フレックスコンテナーと呼ばれています。フレックスコンテナーを作るには、その領域のコンテナーに対して display プロパティの値を flex もしくは inline-flex に設定します。またこれにより、このコンテナー直下の子要素がフレックスアイテムとなります。

flex-flow 一括指定プロパティ

flex-direction と flex-wrap の 2 つのプロパティは、flex-flow 一括指定プロパティにより 2 つ同時に指定することができます。最初に指定される値が flex-direction で、2 つ目の値が flex-wrap です。

1 つ目の値を flex-direction に使える値 (row, row-reverse, column, column-reverse のいずれか)

2 つ目の値を wrap か nowrap

フレックスアイテムに適用されるプロパティ

フレックスアイテムに対してさらなる制御をするために、アイテムを直接操作対象にすることができます。以下の 3 つのプロパティを使用します。

• flex-grow
• flex-shrink
• flex-basis

主軸に沿ったフレックスアイテムの比率の制御

このガイドでは、フレックスアイテムに適用され、主軸に沿ってアイテムの寸法と自由度を制御することができる三つのプロパティ — flex-grow, flex-shrink, flex-basis を見ていきます。

3 つのプロパティは、フレックスアイテムの自由度を以下の観点から制御します。

• flex-grow: このアイテムが得る正の自由空間はどれくらいか。
• flex-shrink: このアイテムから縮小できる負の自由空間はどれくらいか。
• flex-basis: 伸長や縮小が発生する前のアイテムの寸法はいくつか。

フレックスアイテムをレイアウトするための空間を確保するには、まずアイテムの大きさをブラウザーが知る必要があります。

CSS には min-content と max-content という概念があります。これらのキーワードは CSS Intrinsic and Extrinsic Sizing 仕様書で定義されており、長さの単位の代わりに使用することができます。

max-contentとmin-content

widthにmax-content, min-contentを指定するとどうなるのか？

width: max-content; を指定すると、テキストが収まる最小幅がwidthになる

min-contentを指定したブロックは、テキストを単語で区切り、最大幅となる「sample-3」にあわせたwidthに調整されます。

正と負の自由空間

フレックスコンテナーに正の自由空間がある場合は、コンテナー内にフレックスアイテムを表示するのに必要な空間よりも大きな空間があるということです。

アイテムの自然な大きさの合計が、フレックスコンテナー内の利用可能な空間よりも大きい場合、負の自由空間が発生します。

フレックスのプロパティを理解するには、この正の自由空間の分配と負の自由空間の除去を理解する必要があります。

flex-basis プロパティ

flex-basis プロパティは、空間の分配が行われる前のフレックスアイテムの初期の大きさを指定します。このプロパティの初期値は auto です。flex-basis が auto に設定されている場合、ブラウザーはアイテムの初期の大きさを計算するために、まずアイテムの主軸方向の寸法に絶対寸法が設定されているかどうかをチェックします。例えば、アイテムの幅を 200 ピクセルに設定している場合です。この場合、200px がこのアイテムのフレックスベースとなります。

アイテムの寸法が自動になっている場合、auto を指定すると内容物の寸法が解決値になります。このとき、min- および max-content の寸法に関する知識があると便利です。フレックスボックスでは、アイテムの max-content の寸法を flex-basis として使用します。

余白の分配を行う際に、フレックスボックスでアイテムの寸法を完全に無視したい場合は、flex-basisを0に設定します。これは基本的に、フレックスボックスのすべての空間が利用可能であり、それをアイテムに比例して分配することを指示します。

flex-grow プロパティ

flex-growプロパティは、フレックス伸長係数を指定します。これは、正の自由空間が分配されたときに、フレックスアイテムがフレックスコンテナー内の他のフレックスアイテムに対してどれだけ伸長するかを決定します。

すべてのアイテムの flex-grow 係数が同じであれば、余白はすべてのアイテムに均等に分配されます。このような場合、ふつうは値に 1 を使用しますが、すべてのアイテムに flex-grow の値として 88、100、1.2 など与えることもできます。これは係数です。係数がすべてのアイテムで等しく、フレックスコンテナー内に正の自由空間があれば、すべてのアイテムに均等に分配されます。

flex-grow と flex-basis を組み合わせる

flex: 1 1 auto;

この場合、flex-basis の値は auto で、アイテムには幅が設定されていないので、寸法は自動調整されます。つまり、フレックスボックスはアイテムの max-content の寸法を見ていることになります。アイテムを並べると、フレックスコンテナー内に正の自由空間 (この画像で斜線を引いた部分) ができます。

コンテンツの寸法と同じ flex-basis を使用しているので、全体の利用可能な空間 (フレックスコンテナーの幅) から分配可能な領域を差し引いた余白を各アイテムに均等に分配しています。大きなアイテムは、他のアイテムと同じ量の余白が割り当てられますが、もともと寸法が大きいので、結果的にもっと大きくなります。

flex: 1 1 0;

ここでは、空間の分配の計算上、アイテムの寸法を 0 としています。すべての空間が確保され、すべてのアイテムが同じ flex-grow 係数を持っているので、それぞれに同じ量の空間が分配されることになります。最終的には、3 つの同じ幅の伸縮可能ななアイテムができあがります。

flex-shrink プロパティ

flex-shrinkプロパティでは、フレックス縮小係数を指定します。これは、負の自由空間が分配されたときに、フレックスコンテナー内の他のフレックスアイテムに対して、フレックスアイテムがどれだけ縮小するかを決定します。

このプロパティは、ブラウザーがフレックスアイテムの flex-basis 値を計算して、フレックスコンテナーに収まらない大きさだと判断した場合に対処します。flex-shrink に正の値があれば、コンテナーからはみ出さないようにアイテムが縮小されます。

次のライブ例では、3 つのアイテムをフレックスコンテナーに入れています。それぞれに 200 ピクセルの幅を与え、コンテナーの幅は 500 ピクセルにしています。flex-shrink を 0 に設定すると、アイテムは縮小できないので、ボックスからはみ出してしまいます。

flex-shrink と flex-basis の組み合わせ

flex-shrink は、flex-grow とほとんど同じように動作すると言えるでしょう。しかし、完全に同じではない理由が 2 つあります。

通常は些細な違いですが、仕様に定義されていることは、負の空間に対して flex-shrink が行うことが、正の空間に対して flex-grow が行うこととまったく同じではない理由の一つです。

「注：負の空間を分配する際には、フレックス縮小係数にフレックスベースの大きさが乗じられます。これは、アイテムが縮小できる量に比例して負の空間を分配するもので、例えば、大きなアイテムが目に見えて縮小する小さなアイテムが、大きなアイテムが目立って縮小する前にゼロまで縮小してしまうことはありません。」

利用できる余白が残っているか

正の自由空間がないとアイテムは伸長しませんし、負の自由空間がないとアイテムは縮小しません。

すべてのアイテムの幅 (列の場合は高さ) を合計したとき、その合計がコンテナーの幅 (または高さ) の合計よりも小さい場合は、正の自由空間があり、flex-grow の出番となります。 すべてのアイテムの幅 (列の場合は高さ) を合計した場合、その合計がコンテナーの幅 (または高さ) の合計より大きい場合は、負の自由空間があり、flex-shrink が効いてきます。

flex プロパティの一括指定の値

flex-grow、flex-shrink、flex-basis の各プロパティを個別に使うケースは稀であり、そのかわりに flex 一括指定プロパティでまとめて指定されることが多いでしょう。flex 一括指定プロパティは、flex-grow、flex-shrink、flex-basis の順に 3 つの値を設定することができます。

flex: initial はフレックスボックスの初期値にリセットします。これは flex: 0 1 auto に設定することと同じです。この場合 flex-grow は 0 となるため、アイテムが flex-basis よりも大きくなることはありません。flex-shrink は 1 なので、必要な場合にはオーバーフローするのではなく収縮します。flex-basis の値は auto です。アイテムに設定されている主軸に沿った寸法か、またはアイテムの内容の寸法がフレックスアイテムの寸法として使用されます。

flex: auto では、flex: 1 1 auto に設定することと等しくなります。flex: initial とは、アイテムがコンテナーを埋めるように伸張する点を除いて同じで、必要に応じて収縮もします。

flex: none は、全く伸縮性のない flex アイテムを作成します。これは flex: 0 0 auto と同じです。アイテムは伸張も収縮もせずに、flex-basis: auto のフレックスボックスとして配置されます。

フレックスコンテナー内のアイテムの配置

フレックスボックスがウェブ開発者の関心を急速に集めた理由の一つに、ウェブコンテンツで適切な位置合わせができる初めての機能であってことが挙げられます。正しい縦の位置合わせが可能になったことで、ついにボックスの中央寄せを簡単にできるようになりました。このガイドでは、フレックスボックスにおいて位置合わせや行端揃えのプロパティがどのように働くかを詳しくみていきます。

ボックスを中央寄せするには、align-items プロパティを使って交差軸上 (今回の場合は縦軸上) の位置合わせをし、justify-content プロパティで主軸上 (今回の場合は横軸上) の位置合わせをします。

• justify-content — 全アイテムの主軸上の配置を制御する。
• align-items — 全アイテムの交差軸上の配置を制御する。
• align-self — 個別のフレックスアイテムごとに交差軸上の配置を制御する
• align-content — 仕様では「フレックス行のパッキング (packing flex lines)」と説明されている。交差軸上でのフレックス行間の余白を制御する。
• gap, column-gap, row-gap — フレックスアイテム間に間隔または溝を生成するために使用する。

交差軸

align-items プロパティと align-self プロパティは、交差軸 (cross axis: flex-direction が row のときは列に沿った、または flex-direction が column のときは行に沿った軸) 上でのフレックスアイテムの配置を制御します。

アイテムの配置を制御するために、以下の値を使うことができます。

• align-items: flex-start
• align-items: flex-end
• align-items: center
• align-items: stretch
• align-items: baseline

align-self で個別のアイテムを位置合わせ

align-items プロパティはすべてのアイテムの align-self プロパティをまとめて設定します。つまり、align-self プロパティでは 1 つずつ個別のアイテムを対象として指定できます。align-self プロパティには、align-items プロパティに使えるすべての値と、それに加えてフレックスコンテナーで定義した値にリセットするための auto を使うことができます。

交差軸上の位置合わせ — align-content プロパティ

ここまで、フレックスコンテナーによって定義される領域の中で、アイテム全体またはアイテム個別の位置合わせをしてきました。折り返しのある複数行のフレックスコンテナーがある場合、align-content プロパティを使えば行間でのスペース分配を制御できます。

align-content が有効に動作するためには、アイテムを表示するのに必要な高さよりもフレックスコンテナーの方が高い必要があります。このプロパティはすべてのアイテムを１つのセットとして扱い、あまりのスペースの扱いと、セットに含まれるアイテムの配置について指示します。

align-content プロパティには以下の値を設定できます。

• align-content: flex-start
• align-content: flex-end
• align-content: center
• align-content: space-between
• align-content: space-around
• align-content: stretch
• align-content: space-evenly (フレックスボックス仕様には含まれていない)

order プロパティ

フレックスアイテムが表示される順序を逆転することができましたが、それに加えて order プロパティを使用することでアイテム個別に表示される順序を変更することができます。

フレックスアイテムの既定の order は 0 です。したがって 0 より大きい order をもつアイテムは、明示的に order を指定されていないアイテムの後ろに表示されます。

order には負の値を指定することもでき、ほかのアイテムはそのままの順序を保ちながら一つのアイテムだけを先頭に表示したい場合になどに有用です。先頭に表示したいアイテムに order: -1 を設定することで、0 より小さい order のこのアイテムが常に先頭に表示されるようになります。

order プロパティとアクセシビリティ

order プロパティの使用は、flex-direction による方向の変更と同様のアクセシビリティに対する影響があります。order は描画の順序および表示上の順序を変更しますが、逐次的なナビゲーションの順序は変更しません。そのため、もしユーザーがアイテム間の移動をタブによって行った場合、レイアウト中を混乱するような動作で飛び回っているように見えるでしょう。

この例のような細かな調整は order プロパティを使うのにふさわしい状況です。読むためやタブ移動のための論理的な順序を保ち、アクセシビリティと構造化された形を維持してください。そして order プロパティは純粋に視覚的なデザインの調整のために使ってください。その際にはユーザーがキーボードでタブ移動をする対象となるアイテムの順序変更をしていないか留意してください。特に比較的新しいレイアウトを使うときには、マウスやタッチ画面ではなく、キーボードのみによるサイト操作の確認を確実にテストに含めた方がよいでしょう。そのテストで、開発時の選択がコンテンツの移動を難しくしてしまっているかどうか、すぐにわかるようになるでしょう。

フレックスアイテムの折り返しのマスター

フレックスボックスは一次元のレイアウトとして設計されており、つまりアイテムを行または列として扱います。 — しかし、同時ではありません。しかし、フレックスアイテムを新しい行に折り返し、 flex-direction が row の場合は新しい行を、 flex-direction が column の場合は新しい列を生成します。