WPの

～ワードプレス関連～

意外と知らないレスポンシブなCSS３プロパティ【display:flex;】

   

CSS3プロパティ「display:flex;」について

WEBサイトはスマホ対応の為、レスポンシブWEBデザインへ移行していますが、導入のためにCSSフレームワークが利用されていると思います。

レスポンシブ対応のため、有名なものではbootstrapやFoundationなどのCSSフレームワークがありますが、CSS3プロパティ「display:flex;」でも可能です。

CSSプロパティdisplayのリファレンスとdisplay:flex;について動作を確認したいと思います。

↓↓すぐに「display:flex;」の動作を確認する↓↓

inline（初期値）

  • 親要素であるdivにのみdisplay:inline;を適用した場合。

    <div style="display:inline;">
	<div style="height:50px; background:#0066CC; color:#fff;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

    初期状態です。

  • 子要素であるdivにのみdisplay:inline;を適用した場合。

    <div>
	<div style="display:inline; height:50px; background:#0066CC; color:#fff;">DIV1</div>
	<div style="display:inline; height:50px; background:#006699; color:#fff;">DIV2</div>
	<div style="display:inline; height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

    子要素のインライン化は、マージン0でも改行すると余白が出来ます。heightとwidthは、効かない。

inline-block

  • 親要素であるdivにのみdisplay:inline-block;を適用した場合。

    <div style="display:inline-block;">
	<div style="height:50px; background:#0066CC; color:#fff;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

    要素内の横幅にフィットします。

  • 子要素であるdivにのみdisplay:inline-block;を適用した場合。

    <div>
	<div style="display:inline-block; height:50px; background:#0066CC; color:#fff;">DIV1</div>
	<div style="display:inline-block; height:50px; background:#006699; color:#fff;">DIV2</div>
	<div style="display:inline-block; height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

    子要素のインラインブロック化は、マージン0でも改行すると余白が出来ます。heightとwidthの指定が可能。

block

  • 親要素であるdivにのみdisplay:block;を適用した場合。

    <div style="display:block;">
	<div style="height:50px; background:#0066CC; color:#fff;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

    heightとwidthの指定が可能。floatで回り込むようになる。

  • 子要素であるdivにのみdisplay:block;を適用した場合。

    <div>
	<div style="display:block; height:50px; background:#0066CC; color:#fff;">DIV1</div>
	<div style="display:block; height:50px; background:#006699; color:#fff;">DIV2</div>
	<div style="display:block; height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

    heightとwidthの指定が可能。floatで回り込むようになる。

flex（新しいプロパティ）

比率による伸縮 flex

レスポンシブWEBデザインで表示出来るdisplay:flex;について検証します。2015年11月においては、GoogleChrome,FireFox,IEは対応していましたが、safariのみ未対応で、ベンダープレフィックス-webkit-が必要になります。※ベンダープレフィックスとは、試験運用のベータ版といった感じです。そのうちsafariも対応してくれると思います。

また、Windows版safariはサポートを終了しており、バージョン5.1.7で止まっています。セキュリティー面に複数の脆弱性があり、使用を避けた方がよさそうだ。

INTERNET Watch

  • 親要素であるdivにのみdisplay:flex;(-webkit-flex;)を適用した場合。

    <div style="display:flex; display:-webkit-flex;">
	<div style="height:50px; background:#0066CC; color:#fff;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

    横並び。子要素の比率が指定されていないため、要素内の横幅にフィットします。

  • 親要素であるdivにdisplay:flex;を適用し、子要素に比率を決めるflex:〇〇;(-webkit-flex:〇〇;)を付けた場合。

    <div style="display:flex; display:-webkit-flex;">
	<div style="height:50px; background:#0066CC; color:#fff; flex:1;-webkit-flex:1;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff; flex:1;-webkit-flex:1;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff; flex:1;-webkit-flex:1;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

    子要素すべてにflex:1;を指定。左から1:1:1の比率になっています。もしくは、flex:auto;でも同じような結果になります。

    <div style="display:flex; display:-webkit-flex;">
	<div style="height:50px; background:#0066CC; color:#fff; flex:1;-webkit-flex:1;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff; flex:2;-webkit-flex:2;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff; flex:3;-webkit-flex:3;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

    子要素へflex:1;flex:2;flex:3;を順番に指定。つまり、左から1:2:3の比率になっています。

  • 親要素であるdivにdisplay:flex;を適用し、子要素1つの横幅を固定して、残りの領域いっぱいに子要素を伸縮させます。

    <div style="display:flex; display:-webkit-flex;">
	<div style="height:50px; background:#006699; color:#fff;width:100px;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;flex:auto;-webkit-flex:auto;">DIV3</div>
</div>
    DIV2
    DIV3

    左の子要素が固定幅（100px）で、右が残りの領域いっぱいに広がります。左にサムネイルで右にタイトルと説明文などの時に使えますね。

横方向の配置 justify-content

  • 親要素であるdivにdisplay:flex;とjustify-content:flex-start;を適用した場合。左揃え

    <div style="background:#f5f5f5;width:100%;height:100px;display:flex; display:-webkit-flex; flexjustify-content:flex-start;-webkit-justify-content:flex-start;">
	<div style="height:50px; background:#0066CC; color:#fff;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

  • 親要素であるdivにdisplay:flex;とjustify-content:center;を適用した場合。中央揃え

    <div style="background:#f5f5f5;width:100%;height:100px;display:flex; display:-webkit-flex;justify-content:center;-webkit-justify-content:center;">
	<div style="height:50px; background:#0066CC; color:#fff;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

  • 親要素であるdivにdisplay:flex;とjustify-content:flex-end;を適用した場合。右揃え

    <div style="background:#f5f5f5;width:100%;height:100px;display:flex; display:-webkit-flex;justify-content:flex-end;-webkit-justify-content:flex-end;">
	<div style="height:50px; background:#0066CC; color:#fff;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

縦方向の配置 align-items

  • 親要素であるdivにdisplay:flex;とalign-items:flex-start;を適用した場合。上揃え

    <div style="background:#f5f5f5;width:100%;height:100px;display:flex; display:-webkit-flex;align-items:flex-start;-webkit-align-items:flex-start;">
	<div style="height:50px; background:#0066CC; color:#fff;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

  • 親要素であるdivにdisplay:flex;とalign-items:center;を適用した場合。中央揃え

    <div style="background:#f5f5f5;width:100%;height:100px;display:flex; display:-webkit-flex;align-items:center;-webkit-align-items:center;">
	<div style="height:50px; background:#0066CC; color:#fff;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

  • 親要素であるdivにdisplay:flex;とalign-items:flex-end;を適用した場合。下揃え

    <div style="background:#f5f5f5;width:100%;height:100px;display:flex; display:-webkit-flex;align-items:flex-end;-webkit-align-items:flex-end;">
	<div style="height:50px; background:#0066CC; color:#fff;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

子要素の個別配置 align-self

  • 親要素であるdivにdisplay:flex;とjustify-content:flex-end;、最初の子要素にalign-self:center;2番目にalign-self:flex-end;を適用。

    <div style="background:#f5f5f5;width:100%;height:100px;display:flex; display:-webkit-flex;justify-content:flex-end;-webkit-justify-content:flex-end;">
	<div style="height:50px; background:#0066CC; color:#fff;align-self:center;-webkit-align-self:center;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff;align-self:flex-end;-webkit-align-self:flex-end;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

  • 親要素であるdivにdisplay:flex;とalign-items:flex-end;、最初の子要素にalign-self:center;2番目にalign-self:flex-end;を適用。

    <div style="background:#f5f5f5;width:100%;height:100px;display:flex; display:-webkit-flex;align-items:flex-end;-webkit-align-items:flex-end;">
	<div style="height:50px; background:#0066CC; color:#fff;align-self:center;-webkit-align-self:center;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff;align-self:flex-end;-webkit-align-self:flex-end;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

flex-directionで横並びを縦並びに変更して、同じプロパティで検証。

  • 親要素であるdivにdisplay:flex;とjustify-content:flex-end;、最初の子要素にalign-self:center;2番目にalign-self:flex-end;を適用。

    <div style="background:#f5f5f5;width:100%;height:100px;display:flex; display:-webkit-flex;justify-content:flex-end;-webkit-justify-content:flex-end;flex-direction:column;-webkit-flex-direction:column;">
	<div style="height:50px; background:#0066CC; color:#fff;align-self:center;-webkit-align-self:center;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff;align-self:flex-end;-webkit-align-self:flex-end;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

  • 親要素であるdivにdisplay:flex;とalign-items:flex-end;、最初の子要素にalign-self:center;2番目にalign-self:flex-end;を適用。

    <div style="background:#f5f5f5;width:100%;height:100px;display:flex; display:-webkit-flex;align-items:flex-end;-webkit-align-items:flex-end;flex-direction:column;-webkit-flex-direction:column;">
	<div style="height:50px; background:#0066CC; color:#fff;align-self:center;-webkit-align-self:center;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff;align-self:flex-end;-webkit-align-self:flex-end;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

折返し flex-wrap

  • 親要素であるdivのdisplay:flex;は、flex-wrap:nowrap;（折返しなし）がデフォルト値になります。width:100px;を指定しても、横一列に収まる横幅に縮小されています。

    <div style="display:flex; display:-webkit-flex;">
	<div style="height:50px; width:100px; background:#0066CC; color:#fff;">DIV1</div>
	<div style="height:50px; width:100px; background:#006699; color:#fff;">DIV2</div>
	<div style="height:50px; width:100px; background:#009999; color:#fff;">DIV3</div>
	<div style="height:50px; width:100px; background:#0066CC; color:#fff;">DIV4</div>
	<div style="height:50px; width:100px; background:#006699; color:#fff;">DIV5</div>
	<div style="height:50px; width:100px; background:#009999; color:#fff;">DIV6</div>
	<div style="height:50px; width:100px; background:#0066CC; color:#fff;">DIV7</div>
	<div style="height:50px; width:100px; background:#006699; color:#fff;">DIV8</div>
	<div style="height:50px; width:100px; background:#009999; color:#fff;">DIV9</div>
</div>
    DIV1
    DIV2
    DIV3
    DIV4
    DIV5
    DIV6
    DIV7
    DIV8
    DIV9

  • 親要素であるdivのdisplay:flex;にflex-wrap:wrap;（折返し）を適用。

    <div style="display:flex; display:-webkit-flex; flex-wrap:wrap;-webkit-flex-wrap:wrap;">
	<div style="height:50px; width:100px; background:#0066CC; color:#fff;">DIV1</div>
	<div style="height:50px; width:100px; background:#006699; color:#fff;">DIV2</div>
	<div style="height:50px; width:100px; background:#009999; color:#fff;">DIV3</div>
	<div style="height:50px; width:100px; background:#0066CC; color:#fff;">DIV4</div>
	<div style="height:50px; width:100px; background:#006699; color:#fff;">DIV5</div>
	<div style="height:50px; width:100px; background:#009999; color:#fff;">DIV6</div>
	<div style="height:50px; width:100px; background:#0066CC; color:#fff;">DIV7</div>
	<div style="height:50px; width:100px; background:#006699; color:#fff;">DIV8</div>
	<div style="height:50px; width:100px; background:#009999; color:#fff;">DIV9</div>
</div>
    DIV1
    DIV2
    DIV3
    DIV4
    DIV5
    DIV6
    DIV7
    DIV8
    DIV9

縦並びへの変更 flex-direction（モバイル端末用など）

  • 親要素であるdivのdisplay:flex;は、flex-direction:row;（横並び）がデフォルト値になり、flex-direction:column;に変更すると縦並びになる。（メディアクエリmax-widthを指定してモバイル端末では縦並びにする際に使用。）

    <div style="display:flex; display:-webkit-flex; flex-direction:column;-webkit-flex-direction:column;">
	<div style="height:50px; background:#0066CC; color:#fff;flex:1;">DIV1</div>
	<div style="height:50px; background:#006699; color:#fff;flex:1;">DIV2</div>
	<div style="height:50px; background:#009999; color:#fff;flex:1;">DIV3</div>
</div>
    DIV1
    DIV2
    DIV3

display:flex;のまとめ

使い方

ブラウザ標準のCSS3プロパティになるので、手軽に実装できるのが良いところです。レスポンシブWEBデザインを使いたいときに用います。比率による割り付けや、親要素内で上下左右配置、子要素の折返しなど、豊富な表現方法があります。

用途

要素を横並びの状態で伸縮できるので、メニューやコンテンツの複数カラムで表示させる際に役立ちます。

使用上の注意

常に比率を守って伸縮する為、モバイル端末用にCSSメディアクエリを使用して、flex-direction:column;で縦並びにするなどの対策が必要です。safariのみ未対応でベンダープレフィックス-webkit-が必要なので忘れないように、付けたしましょう。

 - CSS ,