Flexboxでのレイアウト
カテゴリ:インターン生ブログ
こんにちは!インターン生の西です!今回はレイアウトをする上でとても便利な機能であるFlexboxについて紹介していきたいと思います!
1.Flexboxとは
Flexboxとは「Flexible Box Layout Module」の略のことであり、複雑なレイアウトも簡単に組める書き方です。
2.Flexboxの書き方
例えば、画像にあるような縦に三つ並んだボックスを横並びにしたい場合の記述を紹介します。
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/aeacfdfb411ebb450b02fdce7f44b362.png)
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/e128db8d0e512fb110d3c815440fdc20.png)
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/597b611213c469b06dc805e90b58d383.png)
FlexboxではFlexを適応させた親要素が「flexコンテナ」になり、その子要素が自然と「flexアイテム」となることによって設定したflexプロパティに対応したレイアウトができます。ここでは「container」のCSSに記述していきます。例えば、「container」の親要素に記述してしまったらFlexboxは適応されないので注意しましょう!
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/6e7b0fb2de8008ef3d34096867af73fc.png)
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/8e02ff516780b6aa4028f49b8ec0216e.png)
2.Flexプロパティの種類
Flexプロパティにはたくさんの種類がありますが、今回はいくつか紹介したいと思います。
・flex-direction
row | 子要素を左から右に配置 |
row-reverse | 子要素を右から左に配置 |
column | 子要素を上から下に配置 |
column-reverse | 子要素を下から上に配置 |
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/c72623d7260850dfc4328a5e6d8585ea.png)
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/a6e6c8d52f5537bd96be32d17cb7c12e.png)
例えば、「row-reverse」を適応させたら画像のように子要素が右から左へ並ぶようになります。
・justify-content
flex-start | 左揃え |
flex-end | 右揃え |
center | 中央ぞろえ |
space-between | 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置 |
space-around | 全ての要素を均等に間隔をあけて配置 |
ここで、よく使うのが「center」「space-between」「space-around」です。今回は「space-between」を例に挙げてみましょう。
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/d275af090926480d078576036452bc1c.png)
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/7e1c6e8d3731c769e4a804695200be97-1024x153.png)
Flexプロパティは他にもたくさん種類があり、とてもレイアウトがしやすくなっています。
3.最後に
Flexboxは非常に便利ですが、気を付けることはあります。例えば、たくさんの要素を「align-content」というプロパティで複数行にわたって調整するときに「flex-wrap: nowrap ;」(子要素を折り返しせず、一行に並べる)が適応されていたら、「align-content」が無効になってしまうため、下の画像のように要素が横並びになってしまいます。
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/3fe65582aa4c9049563b981a5ec1f059.png)
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/0c31f177856704be67e7bb5c8c1d70d3-1024x494.png)
この場合、「flex-wrap」プロパティのwrap(子要素を折り返し、複数行に上から下へ並べる)という値を記述してあげれば下のように「align-content」が適応されます。
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/6ac97365a345c80e99678e46abec6e3f.png)
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/7ed3a4eb06dcd32f6bbb0455106e40b8-1024x494.png)
このように対立する機能を持つプロパティを重複させないということに気を付けましょう!そして、flexプロパティを適応させたい要素の親要素に記述するということも忘れないでください!