flex の動作例

2023年4月22日

よく忘れるので、メモしときます。

1. flex-direction

<div class="box-container" style="display:flex; flex-direction: ${V}">
  <div class="box-a w-120 h-120">A</div>
  <div class="box-b w-60 h-60">B</div>
  <div class="box-c w-30 h-30">C</div>
</div>

row（横方向）

A
B
C

column（縦方向）

A
B
C

2. justify-content

<div class="box-container" style="display:flex; flex-direction: row; justify-content: ${V}">
  <div class="box-a w-120 h-120">A</div>
  <div class="box-b w-60 h-60">B</div>
  <div class="box-c w-30 h-30">C</div>
</div>

start（左寄せ）

A
B
C

center（中央揃え）

A
B
C

end（右寄せ）

A
B
C

space-between（余白等幅、両端ツメ）

　余白が等間隔になるように並べる。両端に余白は無し。(A+W+B+W+C) みたいな感じ（W=余白÷(子要素数-1)）
A
B
C

space-around（余白等幅、両端二分アキ）

　(W+A+W)+(W+B+W)+(W+C+W) みたいな感じ（W=余白÷(子要素数*2)）
A
B
C

space-evenly（余白等幅、両端アキ）

　余白が等間隔になるように並べる。両端に余白あり。(W+A+W+B+W+C+W) みたいな感じ（W=余白÷(子要素数+1)）
A
B
C

justify-content: stretch と flex-grow

<div class="box-container" style="display:flex; flex-direction: row; justify-content: stretch">
  <div class="box-a w-120 h-120" ${A}>A</div>
  <div class="box-b w-60 h-60" ${B}>B</div>
  <div class="box-c w-30 h-30" ${C}>C</div>
</div>
　余白を flex-glow の比率で分配して、それぞれを子要素の寸法に加算する。 　例えば横幅が 480px の親要素の中に子要素Ａ・Ｂ・Ｃ（幅はそれぞれ 120px, 60px, 30px）がある場合は、まず余白幅は 480 – (120 + 60 + 30) = 270px となる。

A=""　／　B=""　／　C=""

　flex-grow の指定がないと余白は分割されない。よって子要素の幅は変化せず。
A
B
C

A="flex-grow:1″　／　B=""　／　C=""

　1:0:0 の比率で余白幅を分割すると 270px, 0px, 0px となり、元の子要素の幅に加算すると 390px, 60px, 30px となる。
A
B
C

A="flex-grow:1″　／　B="flex-grow:1″　／　C=""

　1:1:0 の比率で余白幅を分割すると 135px, 135px, 0px となり、元の子要素の幅に加算すると 255px, 195px, 30px となる。
A
B
C

A="flex-grow:1″　／　B="flex-grow:1″　／　C="flex-grow:1″

　1:1:1 の比率で余白幅を分割すると 90px, 90px, 90px となり、元の子要素の幅に加算すると 210px, 150px, 120px となる。
A
B
C

A="flex-grow:1″　／　B="flex-grow:2″　／　C="flex-grow:3″

　1:2:3 の比率で余白幅を分割すると 45px, 90px, 135px となり、元の子要素の幅に加算すると 165px, 150px, 165px となる。
A
B
C

3. align-items

<div class="box-container" style="display:flex; flex-direction: row; align-items: ${V}">
  <div class="box-a w-120 h-120">A</div>
  <div class="box-b w-60 h-60">B</div>
  <div class="box-c w-30 h-30">C</div>
</div>

start（上揃え）

A
B
C

center（中央揃え）

A
B
C

end（下揃え）

A
B
C

stretch（子要素に height がある場合）

　子要素の高さが指定されていると変化なし。
A
B
C
<div class="box-container" style="display:flex; flex-direction: row; align-items: stretch">
  <div class="box-a w-120 h-120">A</div>
  <div class="box-b w-60 h-60">B</div>
  <div class="box-c w-30 h-30">C</div>
</div>

stretch（子要素に height が無い場合）

例１

A
B
C
<div class="box-container" style="display:flex; flex-direction: row; align-items: stretch">
  <div class="box-a w-120">A</div>
  <div class="box-b w-60">B</div>
  <div class="box-c w-30">C</div>
</div>

例２

A
B
C
<div class="box-container h-120" style="display:flex; flex-direction: row; align-items: stretch">
  <div class="box-a w-120">A</div>
  <div class="box-b w-60">B</div>
  <div class="box-c w-30">C</div>
</div>

flex,html

Posted by plkl