flexboxの便利な使い方【CSS】

今回はwebデザインのレイアウトを組む時に使えるflexboxの中でも僕がよく使う便利な使い方についてまとめてみました。

基本的な記述

基本的には親要素に対してdisplay:flex;を指定してあげればいいだけです。

HTML.html

<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>

CSS.css

.container{
  display:flex;
}

親要素に対して指定するプロパティ

justify-content

このプロパティでは親要素に空きスペースがあった場合に子要素をどこに配置するかを決めることができます。

CSS.css

.container{
  display:flex;
  justify-content:flex-start;
}

・flex-start…行の開始位置から配置。左揃え。
・flex-end…行の終わりから配置。右揃え。
・center…中央揃え。
・space-between…最初と最後の子要素を両端に配置し他の要素を均等に配置。
・space-around…両端の要素を含め均等に配置。

子要素に対して指定するプロパティ

order

このプロパティでは子要素の順序を指定できます。

CSS.css

.item1{order:0;}
.item2{order:-1;}
.item3{order:1;}

上記の場合だと2,1,3の順になります。

flex-grow

このプロパティでは親要素に余ったスペースがある場合、指定した子要素が他の要素に比べてどれくらいの比率で伸びるのかを指定できます。

CSS.css

.item1{}
.item2{flex-grow:2;}
.item3{}

上記の場合は2の要素だけ他の要素より二倍に伸ばされます。

最後に

今回は僕がよく使う便利なflexboxのプロパティを紹介しましたがflexboxは他にも便利な使い方があるのでよかったら使ってみてください。拙い文章ですが読んでくれてありがとうございました。何かご指摘や質問があればコメントお願いします。