HTMLのレイアウトにはfloatやclearを駆使したり、苦労してきました。
が、flexboxという便利なものがあることを知り、よく使いそうなところをざっくりメモしておきます。
2段組とかが簡単にできます。
ちなみにinstagramのwebページがflexboxを使ってます。
参考：各ブラウザの対応状況
基本
こんなHTMLを用意します。
<div class="container">
<div class="item">1つめ</div>
<div class="item">2つめ<br>2つめ2行目</div>
<div class="item">3つめ</div>
</div>
普通な感じです。
itemをいい感じに並べるために、itemの外側のcontainerにdisplay:flexを指定します。
.container {
display: flex;
}
横に並びました。
inline-blockに似ていますが、縦の長さは長いブロックに揃えられます。
itemの幅を同じにするために、itemにflex:1を指定します。
.container {
display: flex;
}
.item {
flex: 1;
}
なんて簡単！
flex-grow
さっき指定したflex:1のflexはショートハンドなので、flex-grow:1と同じです。
flex-growは、itemをどのぐらい伸ばすかを指定できます。
上の例では3つのitemをすべて1にしたので、同じ幅になりましたが、2つ目だけに1を指定すると、2つ目だけが幅いっぱいまで伸びます。
itemにflex:1を指定して、2つ目だけflex:3にすると、1:3:1の幅になります。
.container {
display: flex;
}
.item {
flex: 1;
}
.item:nth-child(2) {
flex: 3;
}
簡単！
flex-direction
containerには、flex-directionでitemを並べる向きを指定することができます。
デフォルトがrowなので、何も指定しないとflex-direction:rowを指定したのと同じになります。
今までの例を見てわかるように、rowが横並び、columnが縦並びになります。(なんか直感的じゃない気がするけど…)
他にそれぞれ逆順に並ぶ、row-reverse(右から左へ並ぶ)、column-reverse(下から上へ並ぶ)が指定できます。
containerにflex-direction:columnを指定して、高さも指定し、2つ目のitemだけflex:1にすると、以下のようになります。
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.item:nth-child(2) {
flex: 1;
}
ちなみにheightで指定した100vhのvhという単位は、viewport heightで、ビューポート(画面)の高さに対する割合です。なので、100vhは画面の高さいっぱいということになります。
ヘッダ、メインコンテンツ、フッタ、のような構成の時に使えますね！
order
itemを表示する順番は、各itemにorderを指定して並び替えることができます。
.container {
display: flex;
}
.item {
flex: 1;
}
.item:first-child {
order: 1;
}
orderのデフォルト値は0なので、1つ目にorder:1を指定すると最後に表示されます。
HTML的にはメインコンテンツを最初の方に書いておいて、後の方に書いたナビゲーションブロックを上に表示する、ということもできます。
後からレイアウトが変更になってもCSSだけで変更できるのは良いですね。
justify-content
item同士の間隔や右寄せ、左寄せなどはjustify-contentで指定できます。
justify-content:space-betweenを指定すると、item間にスペースが入って幅いっぱいに等間隔で並びます。
.container {
display: flex;
justify-content: space-between;
}
他に、flex-start(始端：flex-directionがrowの時は左寄せ)、flex-end(終端：flex-directionがrowの時は右寄せ)、center(中央寄せ)、space-around(各itemの周りにスペースが入る)などが指定できます。
メニューボタンを並べたりする時に使うかも。