CSSレイアウト

フレックスボックス

フレックスボックス（Flexbox）は、
要素を横や縦にきれいに並べたいときに使うレイアウト方法。

フレックスコンテナ・アイテムとは

• CSSでdisplay: flex;を指定された親要素 のこと（子要素を柔軟に配置できる箱のこと）。
• 親要素に指定すると、その中の子要素（フレックスアイテム）が、自動的に柔軟に配置できるようになる。
• フレックスコンテナには、主軸・交差軸という軸が設定される。
  • フレックスコンテナの子要素は、主軸の流れによって並べられることとなります。
• フレックスコンテナはブロック要素となります。
  • display: inline-flex;とすると、横に並ぶフレックスコンテナとして設定できます。
• フレックスアイテムはブロック要素でもインライン要素でもない。
  • フレックスアイテムは、仕様によって定義された独自の挙動を持ちます。
• フレックスアイテムの要素としての認識は、コンテンツ、padding、border、marginを含めた、その要素が占める「ボックス全体」 となります。

フレックスアイテムは、widthやheightなどで明示的に幅・高さが指定されていない場合、親いっぱいに広がろうとする。
解決するためには、下記の3つどちらかを設定するとよい。

• flex-grow: 0;　をフレックスアイテムに設定
• width: max-content;　をフレックスアイテムに設定
  • コンテンツの最大幅に合わせて要素の幅を決定。
  • ただし、テキストが長くなった場合に親要素からはみ出す可能性がある点に注意。
• align-items: center; をフレックスアイテムに設定
  • align-itemsには、交差軸のストレッチを解除する役割があるので、主軸方向の不必要な広がりを抑え、アイテムがコンテンツの幅に収まるように見せる間接的な効果を持つことがある。

• フレックスアイテムのデフォルトの幅・高さは前述の通り、親コンテナのクロス軸の高さに合わせて引き伸ばされようとします。
• ただし、imgのようなアスペクト比を保持しようとする要素は影響を受けずに、元のサイズを基準にスペースを占めます。
  • 親いっぱいにしたいときはwidth:100%・height:100%を明示的に指定します。

基本の使い方

• 親要素にdisplay: flex;を指定する
• 子要素は、デフォルトでflex-direction: row;（横並び）になる
  • 子要素はブロック要素でも横並びに変更される

フレックスコンテナ・アイテムには、上記のようにそれぞれ設定できるプロパティが複数あります。
今回はよく使用する8つを見ていきます。

フレックスコンテナのプロパティ

1.flex-direction

主軸の方向を決めるためのプロパティです。
前述の通り、デフォルトはflex-direction: row;（横並び）となります。

flex-direction: row

• 左から右へ主軸が設定されます。
  
• 左右幅：子要素のコンテンツに合わせて（paddingなども含めて）必要な幅になる。
• 高さ：デフォルトでは、子要素のコンテンツに合わせて必要な高さになる。親要素に明示的な高さが指定されている場合は、その制約を受けることもある。

flex-direction: row-reverse

• 主軸の方向を右から左へすることができます。
  

flex-direction: column;

• 主軸の方向を縦並びに変更することができます。
  

• 左右幅：親要素の幅いっぱいに広がる。（Flexbox の column レイアウトにおけるデフォルトの挙動。）

• 高さ：子要素のコンテンツに合わせて必要な高さになる。

flex-direction: column-reverse;

• 主軸を下から上へ、要素を縦並びにすることができます。
  

2.justify-content

主軸方向で要素をどう揃えるかを制御するためのものです。

justify-content: flex-start

主軸の開始地点に要素を揃えるという意味です。

justify-content: center

主軸に対して中央に揃えることができます。

justify-content: flex-end

主軸に対して、終了地点に揃えるという意味です。

justify-content: space-between

要素間の間隔が均等に配置される揃いかたになります。

3.align-items

2のjustify-contentは主軸方向での揃えを指定できるものでしたが、align-itemsは交差軸方向での揃えになります。

交差軸方向に余白がないといけないので、この例だとフレックスコンテナに十分な高さがある場合にだけ使えるプロパティになります。

align-items: flex-start;

交差軸の開始地点に要素を揃えます。

align-items: flex-end;

交差軸の終了地点に要素を揃えます。

align-items: center;

交差軸に対して中央に揃えるという意味になります。

align-items: center;と
justify-content: center;を組み合わせることで、
フレックスコンテナに対して要素を上下左右中央揃えにする時によく使われたりします。

• フレックスアイテムの要素としての認識は、コンテンツ、padding、border、marginを含めた、その要素が占める「ボックス全体」 となります。
• そのため、たとえばフレックスアイテムに背景色を設定して中央揃えにすると、その背景色も、コンテンツ、paddingと共に、その要素のボックス全体として移動し、中央揃えとなります。

4.flex-wrap: wrap

上記のように、フレックスアイテムの幅の合計が、コンテナの幅を超えた場合に使えるプロパティになります。

デフォルトでは、上記のようにコンテナに収まるようにこのように縮もうとします。

しかし、flex-wrap: wrapを設定すれば溢れた分を折り返しすることができるようになります。

折り返されるとそれぞれの行はFlex-lineと呼ばれる行で分割されて、
フレックスアイテムに設定したプロパティは行ごとに同じ値が適用されます。

例えばflex-wrap: wrapで折り返された状態で、
justify-content: space-between;と設定すると、
下記のように行ごとに要素間の間隔が均等に配置される揃いかたになります。

5.gap

並んだ要素の間に隙間を作るための設定です。

.親要素 {
  display: flex; /* または display: grid; */
  gap: 20px; /* 例えば、全ての隙間を20pxにする */
}

値を2つ指定することもできます。

gap: 0 calc(12vw / 3.9);

• 0 の意味：
  • これは「縦方向（上下）の隙間は0」ということです。つまり、上のパーツと下のパーツの間には隙間ができません。
• calc(12vw / 3.9)の意味：
  • これは「横方向（左右）の隙間は、画面の広さに応じて変わる」という指示です。
  • vwは「画面の幅」のこと。
  • 12vwは「画面の幅の12%」という意味です。
  • それを3.9で割っているので、最終的には「画面の幅の約3%」くらいの隙間になります。

つまり、画面が広ければ横の隙間も広くなり、画面が狭ければ隙間も狭くなるように自動で調整されます。

フレックスアイテムのプロパティ

1.align-self

align-itemsでは子要素すべてに交差軸の配置が設定されますが、
align-selfでは、設定された値のみ交差軸方向のflex-start、flex-end、centerの位置に揃えることができます。

• flex-start: 交差軸の開始地点に要素を揃える
• center: 交差軸に対して中央に要素を揃える
• flex-end: 交差軸の終了地点に揃える

交差軸方向ではなく主軸方向で個々のフレックスアイテムを揃えたい場合

margin: autoを使用します。
フレックスボックスでは、margin: auto;を使うと、
その要素のその方向の余白が「利用可能な空間を自動で最大に広げて埋める」という特別な能力を持ちます。

• margin-left: auto; なら、左側の空きを全部吸い込んで右へ押し出す。
• margin-right: auto; なら、右側の空きを全部吸い込んで左へ押し出す。
• 両方 (margin: auto;または margin-left: auto; margin-right: auto;) なら、左右の空きを均等に吸い込んで中央に配置する。

そのため、例えば下記画像の3のみを右寄せにしたい場合、
margin-left: auto;とすると実現できます。

2.order

子要素の表示順番を変えることができます。
order=0は初期値となり、小さい順に並ぶ形となります。

/* 3つの中で1番右に配置 */
main {
  order: 3;
}

#sub1 {
  order: 1;
}

#sub2 {
  order: 2;
}

子要素すべてに指定することで、ソースコード順の表示となります。

3.flex

子要素にflexプロパティを設定することで、
親要素の幅に対して子要素の幅をどう変化するか指定できます。

フレックスアイテムの幅の合計がコンテナに満たなかったり、逆にコンテナの幅を超えたときにどうするかを指定できます。

flex: initial;

• デフォルトです。
• 縮小はされても拡張はされない状態となります。
  

flex: auto;

• 親要素に空きが出ないように子要素の幅を拡張・縮小させます。
  

flex:none

• 子要素の幅は固定され、拡張・縮小はされません。
  

実数を設定する

• flexに指定した実数の割合で幅が調整されます。
• autoと同じく拡張・縮小されます。

よく使われるflex: 1;

• flex: 1;は、空いているスペースを、他のflex: 1;の仲間たちと公平に分け合って利用します。
• つまり、全てのフレックスアイテムを同じ幅にしたい（等幅）時に、よく使用されます。

<section>
<!-- フレックスアイテム1 -->
  <div>
    <h2>すごい家具</h2>
    <p>
      すごい家具です。
    </p>
  </div>
<!-- フレックスアイテム2 -->
  <div>
    <img src="product-1.png" width="400" height="400" alt="すごい家具" />
  </div>
</section>

• 上記のようなHTMLがあるとします。
  • sectionが親要素としてフレックスアイテムのdiv要素が2つ存在します。
• 下記のCSS設定のようにフレックスアイテムにflex:1;を設定することで、ふたつのdiv要素（フレックスアイテム）を等幅に設定することができます。

.product div {
  flex: 1; 
}

グリットレイアウト

Webページを行と列に分けて、
要素を配置するためのレイアウトシステムです。

基本的な考え方

• グリッドコンテナ（親要素）を定義する
• グリッドアイテム（子要素）をその中に配置する
• 行や列のサイズを設定して、アイテムを自由に配置できる

グリッドレイアウトの対象になるのは、指定している直下の要素だけ

<main>
  <article> ... </article>   ← これが1個目の子
  <div id="sub">              ← これが2個目の子
    <article> ... </article>
    <article> ... </article>
  </div>
</main>

上記のコードでmainにグリッドを指定しているとすると、
グリッド上で配置されてるのは「article」と「#sub」だけとなる。
#sub自体は グリッドじゃないから、
通常のブロック要素として中身は縦に積まれることとなる。

| article（mainの子）| article（subの中） |
|                   | article（subの中） |

グリッドシステムの使い方

1.列を指定する

grid-template-columnsで「列（カラム）」を指定する。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

この指定は、

• 横に3つ並べられるスペースを用意する。
• アイテム（子要素）が3つ以下なら1行で収まる。
• 4つ以上になったら、次の行が自動的に作られる。

表示イメージ：

アイテム1 アイテム2 アイテム3  
アイテム4 アイテム5 アイテム6

frについて

• 指定した数値の比率で縦・横に分配する
• grid-template-columns: 1fr 2fr 3fr;とすると、縦列の幅は「1:2:3」となる
• 値の中に「fr」つきでない値が含まれている場合は、先に「fr」つきでない幅が確保され、残った幅を「fr」で指定された数値の比率で分配する。

2.行を指定する

grid-template-rows で「行」を指定する。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

この指定だと、
「横3つ」「縦2つ」のグリッドを作る。

行と列のさまざまな指定方法

(1)番号を使った指定

grid-column: 1/2;
grid-row: 2;

• grid-column: 1/2;
  • 横方向のグリッドの「1列目の線から2列目の線まで」の領域に置く（つまり「1列目のセルに配置」）
• grid-row: 2;
  • 縦方向のグリッドの「2行目」に置く

という指定となるので、該当箇所は★の位置となります。

 --- --- ---
|   |   |   |
 --- --- ---
| ★ | 　 |  |
 --- --- ---

grid-column: 1 / 3;
grid-row: 1 / 3;

• grid-column: 1 / 3;
  • 横方向のグリッドの「1行目から開始して3行目の直前で終わるように配置する」
• grid-row: 1 / 3;
  • 1行目から開始して3行目の直前で終わるように配置する。
  • つまり、アイテムは1行目と2行目の2つ分の高さを占めることになります。

(2)均等に指定

grid-template-columns: repeat(3, 1fr);

「同じサイズの列を3つ作る」という命令です。

(3)個別の幅を指定

grid-template-columns: 600px 400px 300px;

---

未来の自分のために、誰かのためにこの記事が役に立てば幸いです✨🧚🏻