Web制作ネタ帳

Webデザイナーのむーみんです。
以前、FlexBoxについての記事を書きましたが、出だした頃はブラウザによって効かないとかIE9では見れないなど何かと厄介だったけど、いろんな対策・書き方を知っていたら何かと便利だと思うはず!ということで、FlexBoxを使うために知ってたら得するコーディング方法をご紹介します。

000

各ブラウザに対応した書き方を覚えよう!

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内に以下を記述


<!--[if lte IE 9]>
<script src="js/flexibility.js"></script>
<script>
$(function(){
flexibility(document.documentElement);
});
</script>
<![endif]-->

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;

jsdisplay: flex;を追加します。
IE9はエミュレーターでは実装してくれないので、実機で確認してみてください。

スマホ・タブレット表示の時に便利な縦並びの書き方

HTML

<ul class="flex-box-vertical">
<li>縦並び1</li>
<li>縦並び2</li>
<li>縦並び3</li>
<li>縦並び4</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

  • 縦並び1
  • 縦並び2
  • 縦並び3
  • 縦並び4

PCでは横並びで、スマホでは縦並びにしたい時に便利ですね。

PC表示の際・高さを揃えたい時に便利な横並びの書き方

HTML

<ul class="flex-box-horizontal">
<li>横並び1</li>
<li>横並び2</li>
<li>横並び3</li>
<li>横並び4:<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

  • 横並び1
  • 横並び2
  • 横並び3
  • 横並び4
    文字数がバラバラでも高さは合います。

文字数がバラバラだけど、高さは揃えたい時には便利です!

順番の変更・幅を均等で折り返し可能にしたい時の書き方

HTML
順番を変更したい場合

<ul class="flex-box-horizontal-order">
 <li>横並び1</li>
 <li>横並び2</li>
 <li>横並び3</li>
 <li>横並び4</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;
}

幅を均等で折り返し可能にしたい場合

<ul class="flex-box-horizontal-wrap">
<li>横並び1</li>
<li>横並び2</li>
<li>横並び3</li>
<li>横並び4:<br>
文字数がバラバラでも高さは合います。</li>
<li>横並び5</li>
<li>横並び6</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

プレビュー

順番を変更したい場合

  • 横並び1
  • 横並び2
  • 横並び3
  • 横並び4

スマホとPCで表示順を変更したい時にすごく便利です!
昔なら、display: none;とdisplay: block;でコードを表示非表示の切り替えをしていた人は、ぜひ活用してみてください。

幅を均等に折り返し可能にしたい場合

  • 横並び1
  • 横並び2
  • 横並び3
  • 横並び4:
    文字数がバラバラでも高さは合います。
  • 横並び5
  • 横並び6

2段以上にしたい時に便利!(PCのみ対応)

使い方によってはとても便利なので、いつもコーディングする場合は、floatを使用するboxを2種類とFlexBoxを2種類ぐらいのスタイルを作って振り分けをしています。今は基本レスポンシブ対応のコーディングなので記述を出来るだけ少なくしてコーディング時間を時短していきましょー!
でも、気を付けたいのが、FlexBoxの子要素にfloatがかかっていると、safariでは崩れちゃうので、使い分ける時は注意したほうが良いですね。
ぜひ、正しい記述を理解して、活用してみてください。

お問い合わせや相談はこちらから

We create “you are corporate values” by design.