Flexboxとは、Flexible Box Layout Moduleのの事でcssでレイアウトする方法って「inline-block」だったり「float」だったり色々なパターンがありますが最近では自動で調整してくれたり、jsを使わないと出来なかった事がcssだけで出来て文字通りフレキシブルなレイアウトが出来るこのFlexboxがスタンダードになってきました。
少し前まではブラウザの対応状況がまちまちで使いにくかった印象がありますが、ほぼ現行のブラウザで対応されて来ているので使用には問題無さそうです。
このFlexboxですが、実にいろいろな事が出来るのですが一度に羅列すると分かりにくいので今回は基礎編として従来 inline-blockやfloatで行ってきたように使う基礎部分について解説して行きたいと思います。
<div class="flex">
<div><img src="ship.png" alt="帆船の画像"></div>
<div><img src="ship.png" alt="帆船の画像"></div>
<div><img src="ship.png" alt="帆船の画像"></div>
</div>
このソースコードの場合、floatで横並びにしようと思うと中のdivに対してかけるのですがflexの場合は、下記のようにそれを囲む親要素にかけます。
親要素をコンテナ、個要素をアイテムと言います。
.flex{
display: flex;
}
すると上記のような左詰めの形に並びます。
display: flex;だけでこのようになるのは後で解説しますが並び方、横方向、縦方向の指定を入れていなくてもデフォルトで決まっているからです。
display: flex; が指定された時、対象になるのはその要素の子要素になります。
例えば下記のような場合だと<p>はflexの対象になりますが<div>で囲まれた<a>は対象にはなりません。(親の<div>が対象になります。)
<div class="flex">
<div><img src="ship.png" alt="帆船の画像"></div>
▲flexの対象
<p><img src="ship.png" alt="帆船の画像"></p>
▲flexの対象
<div>
<a href="#"><img src="ship.png" alt="帆船の画像"></a>
▲ここは対象にはならない
</div>
▲flexの対象
</div>
<a>も対象にしたい場合は子要素にします。
<div class="flex">
<div><img src="ship.png" alt="帆船の画像"></div>
▲flexの対象
<p><img src="ship.png" alt="帆船の画像"></p>
▲flexの対象
<a href="#"><img src="ship.png" alt="帆船の画像"></a>
▲flexの対象
</div>
次に設定できるオプションです。
左から右へ配置されます。
右から左へ配置されます。
縦方向に上から下に並びます。
縦方向に下から上に並びます。
次に折り返しです。
横に並んで行って幅いっぱいまで来た時に折り返して下の段へ行くか折り返し無しで1行で納めるか設定します。
flex-directionとflex-wrapは次に出てくるflex-flowを使えば一括で指定出来るので特に理由等なければこちらを使いましょう。
.flex{
flex-flow: 【flex-directionの値】 【flex-wrapの値】;
}
.flex{
flex-flow: row nowrap;
}
flex-direction : row-reverse; と似ていますがこちらは右寄せですがアイテム自体は左から並びます。
幅に余裕がある時に中央によって配置されます。
floatではやりにくかった横並びの中央寄せがこれだけで出来ます。
marginを設定しなくても自動で余白を計算してくれるので便利ですが個数が変わると余白が変わったり配置が想定通りにいかなかったりするので注意が必要です。
こちらも両端にも余白がある以外はpace-betweenと同じ特性です。
分かりやすいように上下のpaddingで高さをアイテム毎に変えています。
今までjsでする事が多かった高さ揃えがこの指定で出来ます。
float等で並べた時と似たような挙動。
上揃えです。
これは下揃えに配置されます。
アイテムの縦中央を基準に縦中央寄せになります。
vertical-align: middle;のような挙動。
align-items: center ; に似ていますが基準がベースラインになっています。
.flexsample{
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: stretch;
}
.flexsample .item{
width: 23.5%;
margin: 0 2% 0 0;
}
.flexsample .item:last-child{
margin: 0;
}
オプションの組み合わせたりアイテム要素をwidthやmarginで調整して表示します。
flex-flow: row nowrap;
justify-content: flex-start;
align-items: stretch;
この3つはデフォルトなので入力しなくても反映されます。
最初のサンプルでdisplay: flex;だけで横並びになっていたのは、他のオプションが上記3つになっていたからですね。
応用としてflexを子要素にも設定すればテキストが改行しても同じ高さにしつつ、縦方向は中央揃えにする、といった事も可能です。
<div class="flex01">
<div class="item">
<div>1行テキスト</div>
</div>
<div class="item">
<div>2行テキスト<br>2行テキスト</div>
</div>
<div class="item">
<div>3行テキスト<br>3行テキスト<br>3行テキスト</div>
</div>
</div>
<style>
.flex01{
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: stretch;
}
.flex01 .item{
margin: 0 2% 0 0;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
text-align: center;
font-size: 26px;
font-weight: bold;
line-height: 120%;
background: #008C23;
border: 2px #004D13 solid;
color: #fff;
}
.flex01 .item:last-child{
margin: 0;
}
</style>
他にも素敵なオプションが色々ありますが今回はここまで。
これだけでもかなり柔軟にレイアウトする事が出来ますので色々と試してみて下さい。
主要ブラウザがほぼ対応してきて、今後はflexboxのレイアウトがスタンダードになってくるかと思うので全て網羅していなくてもここであげた内容ぐらい頭に入っていれば結構対応出来てくると思います。
更に色々なオプションは基本を理解した後で良いと思います。
floatやinline-blockによる方法も古い環境に対応出来るという強みがあるので引き出しの1つとして抑えておくとなお良いでしょう。
WEBディレクター、デザイナー、フロントエンドエンジニア、投資家、会社オーナー
2007年に同志と起業、2009年に法人化、2018年にHira's.netを設立。
WEBデザイン、コーディング、ディレクター等WEB制作全般に幅広く携わっています。
