はじめに
最近、HTMLとCSSをしっかりかけるように、Progateをやり始めました。
flexboxについてもっと勉強をしようと思い、このゲームをやってみました。
ゲームなので、理解がしやすいです。１つ１つにしっかり説明がついているので、問題につまった時に、また戻って確認できるのでとても便利です。
justify-content
アイテムを水平方向に並べるもの（横の並べ方をきめるみたいな感じです）
- flex-start: コンテナーの左側に並ぶ
- flex-end: コンテナーの右側に並ぶ
- center: コンテナーの中央に並ぶ
- space-between: アイテム同士の間に等しい間隔を開けて表示
- space-around: アイテムは周囲に等しい間隔を開けて表示
※注意するところは、betweenとaroundの違いです
betweenは、アイテム同士の間にのみ等しい間隔を開けます。ですが、aroundは周囲なので、アイテム同士の間隔だけでなく、左右の間隔なども等しくしてくれます。
See the Pen justify-content by mei (@mei1161) on CodePen.
align-items
アイテムを垂直方向に並べるものです。（縦の並べ方をどうするか決めるみたいな感じ）
- flex-start: コンテナーの上部に並ぶ
- flex-end: コンテナーの下部に並ぶ
- center: 垂直方向の中央に並ぶ
- baseline: アイテムはコンテナーのベースラインに表示される
- stretch: アイテムはコンテナーの大きさに合うよう広がる
stretchだとflexboxの高さに合わせて、アイテムのサイズが自動的に伸び縮みする感じですね！
See the Pen align-items by mei (@mei1161) on CodePen.
flex-direction
コンテナー内でアイテムが配置される方向を決める（配置の仕方を決める）
- row: アイテムは文章と同じ方向に並びます
- row-reverse: アイテムは文章と同じ方向にアイテムの順番を逆にして並べます。
- column: アイテムの順番を変えずに、縦方向に配置
- column-reverse: アイテムの順番を逆にして、縦方向に配置
reverseがつくとアイテムの順番が変わることを覚えておきましょう！
※reverse,columnなどを使用する場合、他の配置などにも影響する可能性があるので気をつけてください！
See the Pen flex-direction by mei (@mei1161) on CodePen.
order
アイテムはデフォルトで０の値を取るが、正や負の整数値を設定することで、アイテムの位置を変えたりすることができる。
※同じクラスを１としてみるので、要素の数で正負の整数値を設置しない場合もある。
See the Pen order by mei (@mei1161) on CodePen.
align-self
align-itemsと同じ値を設定することができる。
指定したアイテムのみ変更することができる。
flex-wrap
行におさめるように設定したり、アイテムを他の行に折り返したりするかを設定することができる。
- nowrap: 全てのアイテムを１行にフィットさせる
- wrap: アイテムは他の行へ折り返す
- wrap-reverse: アイテムを逆順にし、他の行へ折り返す。
See the Pen flex-wrap by mei (@mei1161) on CodePen.
flex-flow
flex-direction(縦方向の並び方）とflex-wrap(行を折り返すかどうか)一緒にしたもの。
これを使うと一気に設定することができる
１つ目にflex-directionの指定、2つ目にflex-wrapの設定をいれます。
(逆でもOK)
align-content
複数の行が他の行とどういう風にどう距離を取り広がるかを指定する。
- flex-start: コンテナーの上側に詰められる
- flex-end: コンテナーの下側に詰められる
- center: コンテナーの中央に詰められる
- space-between: 行はその間に等しい間隔を空けて表示される
- space-around: 行はその周囲に等しい間隔を空けて表示される
- stretch: 行はコンテナに合うように引き延ばされる
space-betweenだとアイテム同士の行間が調整されます。space-aroundでは、上下の間もしっかり等しい間隔を空けます。
※１行だけの場合はalign-contentを使用しても、効果がないので注意！
See the Pen align-content by mei (@mei1161) on CodePen.
最後に
columnwrapreverseを使うと位置関係が、少し変わるので、難易度が高くなるような気がします。
このゲームを通して、flexboxの苦手意識を少しでも、無くして行けるといいと思います。