▶▶▶ 【最大補助3/4】
IT導入補助金特別枠(C類型)を使って越境ECサイトを構築しませんか?

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

[CSS]flexboxを使ったフレキシブルレイアウト

テクニック

[CSS]flexboxを使ったフレキシブルレイアウト

まずFlexboxとは「Flexible Box Layout Module」という意味で、名前にも入っている様にフレキシブルにレイアウトが可能となるボックスになります。若干既に当たり前になってきておりますがHTMLブロックを従来まで使っていたfloatを使わず、柔軟なレイアウトを組むことができます。

そんなflexについて今回は簡単に使用例を踏まえて説明していきます。

flexの使い方

とても簡単に要素(画像やテキスト等)を横並びや縦に並べる事ができるflexですが、これを使う為には並ばせたい要素を子要素と考え、それらを入れておくボックスとなる物を親要素とする。

親要素となる方に「display:flex」を設定する事によってこれらがコンテナの役割を果たし、中に入る子要素を以下の「flex-direction」によって様々なレイアウトで並び替える事が可能になります。

「flex-direction」

→子要素をどの方向、どの順番に並べていくかを指定するプロパティ

 

・ flex-direction: row; 

・ flex-direction: row-reverse; 

・ flex-direction: column; 

・ flex-direction: column-reverse; 

使用例

今回はテキストの要素と画像の要素を横並びにするという事を実践してみました。

<HTML>

<CSS>

 

感想

今回は「flex」という便利に並び替えのレイアウトができる物を使い、コンテンツを配置してみましたが実際に使ってみてやはり使いやすいと感じました。今までfloatを使っていた部分にもflexを置き換えていく事により今後はもっとメンテナンス性が向上したり、構造が簡単な為色んなことにも流用できると感じました。

また、並び替えという部分にしか触れませんでしたがflexには他にも使用用途がありますので機会がありましたら別の時に説明できたらと思います。

この記事を書いた人
yonekuraのアイコン

yonekura

かけだし初心者マン。気になったモノを自身の勉強の為、記録として書いています。

資料ダウンロード

送信いただいたメールアドレス宛に、資料のダウンロードURLを送付いたします。