【HTML】「display: flex」について

2022-09-24

どうも、氷翠です。

今回は「display: flex;」について勉強してみました。

それと同時に動画も作成してみました。

動画では主な使い方を説明している動画になっていますが、調べてみると、いろいろな使い方があります。

動画の中では横並びにして、その順番を入れ替えるとかそういうのがあります。これらに対して「@media」メディアクエリーという方法を併用することで、レスポンシブデザインに応用が利いてきます。

また、「display: flex;」の設定したブロックに対して「justify-content」を利用することでボックスの位置関係をコントロールすることができる。以下は「justify-content」の値です。

「flex-start」と「center」と「flex-end」という位置関係をコントロールする値で、今まで、ブロックを中央にするため、「margin-left: auto;」＋「margin-right: auto;」でやっていたのだけど、これが不要になったわけです。

さらに「space-between」と「space-around」というのもあります。

まず、「space-between」は例えば、子のボックスが３つあったとしたら、左右はそれぞれ端の方に、中のボックスは中央に配置といった感じになる。

次に「space-around」というのは、各ボックスの空きを均等に保ちつつといった感じで配置してくれます。これが縦並びになっても同じような感じに配置されるので、非常に使い勝手がいいものです。もちろん、これらも縦並びになったとしても同様に配置することができます。