フレックスボックス・レイアウトの学習

wakei12.jpg
画像は、わけいのコラージュより

Webサイトやブログで画像やテキストなどを、自由度のあるレイアウトをCSSで実現しようとする際に、よく使われるのがフレックスボックスレイアウトとグリッドレイアウトです。

今回は、フレックスボックスレイアウトに関する違いを体験する学習の紹介です。
参考になれば幸いです。



フレックスボックス・レイアウトの学習ができます

+
※この状態で、「+」ボタンをクリックすると、アイテムが右側に増えます。
さらに、続けるとどんどんボックスを突き抜けて増えていきます。

その状態を変えるのが、右側のボタンから選んだ「値」です。
その「値」が何を意味するかは、次の項で説明します。

まずは、適当にボタンから任意の値を選択してみてください。



使い方

アイテム(カエル)をグレイのボックスに配置する事例です。
「 + 」 ・ 「 - 」ボタンでアイテムの数が増減します。

ボタンから選択する「値」には、次の意味があります。
direction: 左右の方向
  ltr(初期値) 左から右に表示
  rtl 右から左に表示
※「l」はleft、「r」はright、「t」はtoの略

writing-mode: 縦書き横書き方向設定
  horizontal-tb(初期値) 横書き・上から下へ
  vertical-rl 縦書き・右から左へ
  vertical-lr 縦書き・左から右へ
※「horizontal」は水平・横、「vertical」は垂直・縦、「b」はbottomの略

flex-direction: 配置する方向指定
  row(初期値) 横軸に左から右に指定
  row-reverse 横軸に右から左に指定
  column 縦軸に上から下に指定
  column-reverse 縦軸に下から上に指定
※「row」は行・横、「column」は列・縦、「reverse」が逆

flex-wrap: 折り返し点を指定
  nowrap(初期値) 折り返さない
  wrap 折り返す・上から下に配置
  wrap-reverse 折り返す・下から上に配置
「wrap」は巻き込む→折り返す

align-content: 縦軸に配置する位置を指定
  stretch(初期値) 縦軸の幅に対し伸縮
  flex-start 縦軸の開始点から開始
  flex-end 縦軸の終了点から配置
  center 縦軸の中心に配置
  space-between 縦軸に開始点と終了点に配置し、残りを間に等間隔に配置
  space-around 縦軸に等間隔に配置
※「flex」は柔軟な→柔軟なレイアウト

align-items: 縦軸に配置する位置を指定
  flex-start(初期値) 縦軸の開始点から配置
  flex-end 縦軸の終了点から配置
  cennter 縦軸の中心に配置
  baseline 縦軸のベースラインに沿って配置
  stretch 縦軸の幅に合わせて伸縮

justify-content: 縦軸に配置する位置を指定
  flex-start(初期値) 横軸の開始点から配置
  flex-end 横軸の終了点から配置
  center 横軸の中心に配置
  space-between 横軸に開始点と終了点に配置し、残りを間に等間隔に配置
  space-around 横軸に等間隔に配置


gapinline-sizeblock-size
これらは、「横・縦アイテムの間隔」「ボックスの横幅」「ボックスの縦幅」の画面表示の調整のためのスライダーですが、
フレックスボックス・レイアウトには関係ありません。