- Web制作ネタ帳
writer / むーみん
CSS3 FlexBox便利だけど大変!?便利に使うための書き方をご紹介
webデザイナーのむーみんです。
以前、FlexBoxについての記事を書きましたが、出だした頃はブラウザによって効かないとかIE9では見れないなど何かと厄介だったけど、いろんな対策・書き方を知っていたら何かと便利だと思うはず！ということで、FlexBoxを使うために知ってたら得するコーディング方法をご紹介します。
各ブラウザに対応した書き方を覚えよう！
CSS
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
上記で記述してあげると、どのブラウザでもFlexBoxが使用できますが、古いバージョンでのブラウザでは検証していないので、各最新ブラウザとIE10は、今のところ大丈夫そうです。
（※以後説明を省略しておりますが、各ブラウザに対応するため、-webkit-/-moz-/-ms- を使用しています。）
IE9にも対応させたい場合は、flexibility.jsを使用します。
その場合はHTMLのhead内に以下を記述
HTML
<!--[if lte IE 9]>
<script src="js/flexibility.js"></script>
<script>
$(function(){
flexibility(document.documentElement);
});
</script>
<![endif]-->
CSSには
CSS
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
-js-display: flex;
display: flex;
–js–display: flex;を追加します。
IE9はエミュレーターでは実装してくれないので、実機で確認してみてください。
スマホ・タブレット表示の時に便利な縦並びの書き方
HTML
<ul class="flex-box-vertical">
<li>縦並び１</li>
<li>縦並び２</li>
<li>縦並び３</li>
<li>縦並び４</li>
</ul>
CSS
.flex-box-vertical {
display:-webkit-box;
display:-moz-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-direction:normal;
-moz-box-direction:normal;
box-direction:normal;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
box-orient:vertical;
-ms-flex-direction:column;
-webkit-flex-direction:column;
-moz-flex-direction:column;
flex-direction:column;
}
解説・プレビュー
box-direction: normal;
box-direction ・・・ ボックス内の子要素の表示方向を指定する
引用参考サイト：http://www.htmq.com/css3/box-direction.shtml
box-orient :vertical;
box-orient ・・・ ボックス内の子要素の配置方向を指定する
記述できる値は、
horizontal ・・・ ボックス内の子要素は、左から右へ水平に表示される
vertical ・・・ボックス内の子要素は、上から下へ垂直に積み重ねて表示される
inline-axis ・・・ ボックス内の子要素は、インライン軸に沿って表示される（初期値）
block-axis ・・・ ボックス内の子要素は、ブロック軸に沿って表示される（初期値）
inherit ・・・ 親要素の値を継承する
引用参考サイト：http://www.htmq.com/css3/box-orient.shtml
flex-direction: column;
flexコンテナ内でflexアイテムをどのように配置するかを指定します。
column ・・・ 列（縦）の方向
row ・・・ 行（横）の方向
引用参考サイト：https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction
- 縦並び１
- 縦並び２
- 縦並び３
- 縦並び４
PCでは横並びで、スマホでは縦並びにしたい時に便利ですね。
PC表示の際・高さを揃えたい時に便利な横並びの書き方
HTML
<ul class="flex-box-horizontal">
<li>横並び１</li>
<li>横並び２</li>
<li>横並び３</li>
<li>横並び４：<br>文字数がバラバラでも高さは合います。</li>
</ul>
CSS
.flex-box-horizontal {
display:-webkit-box;
display:-moz-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-direction:normal;
-moz-box-direction:normal;
box-direction:normal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
box-orient:horizontal;
-ms-flex-direction:row;
-webkit-flex-direction:row;
-moz-flex-direction:row;
flex-direction:row;
}
解説・プレビュー
box-orient: horizontal;
box-orient ・・・ ボックス内の子要素の配置方向を指定する
記述できる値は、
horizontal ・・・ ボックス内の子要素は、左から右へ水平に表示される
vertical ・・・ボックス内の子要素は、上から下へ垂直に積み重ねて表示される
inline-axis ・・・ ボックス内の子要素は、インライン軸に沿って表示される（初期値）
block-axis ・・・ ボックス内の子要素は、ブロック軸に沿って表示される（初期値）
inherit ・・・ 親要素の値を継承する
引用参考サイト：http://www.htmq.com/css3/box-orient.shtml
flex-direction: row;
flexコンテナ内で flex アイテムをどのように配置するかを指定します。
column ・・・ 列（縦）の方向
row ・・・ 行（横）の方向
引用参考サイト：https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction
- 横並び１
- 横並び２
- 横並び３
- 横並び４
文字数がバラバラでも高さは合います。
文字数がバラバラだけど、高さは揃えたい時には便利です！
順番の変更・幅を均等で折り返し可能にしたい時の書き方
順番を変更したい場合
HTML
<ul class="flex-box-horizontal-order">
<li>横並び１</li>
<li>横並び２</li>
<li>横並び３</li>
<li>横並び４</li>
</ul>
CSS
.flex-box-horizontal-order {
display:-webkit-box;
display:-moz-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-direction:normal;
-moz-box-direction:normal;
box-direction:normal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
box-orient:horizontal;
-ms-flex-direction:row;
-webkit-flex-direction:row;
-moz-flex-direction:row;
flex-direction:row;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.flex-box-horizontal-order > li:first-child {
-webkit-order: 3;
order: 3;
}
.flex-box-horizontal-order > li:nth-child(2) {
-webkit-order: 1;
order: 1;
}
.flex-box-horizontal-order > li:nth-child(3) {
-webkit-order: 4;
order: 4;
}
.flex-box-horizontal-order > li:nth-child(4) {
-webkit-order: 2;
order: 2;
}
幅を均等で折り返し可能にしたい場合
HTML
<ul class="flex-box-horizontal-wrap">
<li>横並び１</li>
<li>横並び２</li>
<li>横並び３</li>
<li>横並び４：<br>
文字数がバラバラでも高さは合います。</li>
<li>横並び５</li>
<li>横並び６</li>
</ul>
CSS
.flex-box-horizontal-wrap {
display:-webkit-box;
display:-moz-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-direction:normal;
-moz-box-direction:normal;
box-direction:normal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
box-orient:horizontal;
-ms-flex-direction:row;
-webkit-flex-direction:row;
-moz-flex-direction:row;
flex-direction:row;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-box-horizontal-wrap > li {
max-width: 33%;
width: 100%;
}
解説
order: 1; order: -1;
flexアイテム内の順序を決める（要素は、order の値の昇順に配置されます）
引用参考サイト：https://developer.mozilla.org/ja/docs/Web/CSS/order
flex-wrap: wrap;
折り返しを可能にするかの設定
指定できる値は、
nowrap ・・・ 折り返しなし
wrap ・・・ 折り返しあり
wrap-reverse ・・・ 折り返しありで、cross-startとcross-endの位置が入れ替わる
引用参考サイト：https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap
justify-content: space-between;
justify-content ・・・ 配置の指定
center ・・・ アイテムを中央に集める
start ・・・ アイテムを始端に集める
end ・・・ アイテムを終端に集める
flex-start ・・・ flex アイテムを始端に集める
flex-end ・・・ flex アイテムを終端に集める
left ・・・ アイテムを左端に集める
right ・・・ アイテムを右端に集める
space-between ・・・ アイテムを均等に分散する（最初と最後のアイテムは端に接する）
space-around ・・・ アイテムを均等に分散する（アイテムは、両側に半分のサイズのスペースを持つ）
space-evenly ・・・ アイテムを均等に分散する（各アイテムの周囲に均等なスペースを置く）
stretch ・・・ アイテムを均等に分散する（サイズが ‘auto’ ならコンテンツに応じて引き伸ばす）
引用参考サイト：https://developer.mozilla.org/ja/docs/Web/CSS/justify-content
プレビュー
順番を変更したい場合
- 横並び１
- 横並び２
- 横並び３
- 横並び４
スマホとPCで表示順を変更したい時にすごく便利です！
昔なら、display: none;とdisplay: block;でコードを表示非表示の切り替えをしていた人は、ぜひ活用してみてください。
幅を均等に折り返し可能にしたい場合
- 横並び１
- 横並び２
- 横並び３
- 横並び４：
文字数がバラバラでも高さは合います。 - 横並び５
- 横並び６
2段以上にしたい時に便利！
使い方によってはとても便利なので、いつもコーディングする場合は、floatを使用するboxを2種類とFlexBoxを2種類ぐらいのスタイルを作って振り分けをしています。今は基本レスポンシブ対応のコーディングなので記述を出来るだけ少なくしてコーディング時間を時短していきましょー！
でも、気を付けたいのが、FlexBoxの子要素にfloatがかかっていると、safariでは崩れちゃうので、使い分ける時は注意したほうが良いですね。
ぜひ、正しい記述を理解して、活用してみてください。
