WPの

~ワードプレス関連~

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

   

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

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

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

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

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

inline(初期値)

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

    DIV1
    DIV2
    DIV3

    初期状態です。


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

    DIV1
    DIV2
    DIV3

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

inline-block

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

    DIV1
    DIV2
    DIV3

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


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

    DIV1
    DIV2
    DIV3

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

block

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

    DIV1
    DIV2
    DIV3

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


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

    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;)を適用した場合。

    DIV1
    DIV2
    DIV3

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


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

    DIV1
    DIV2
    DIV3

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

    DIV1
    DIV2
    DIV3

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


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

    DIV2
    DIV3

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

横方向の配置 justify-content

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

    DIV1
    DIV2
    DIV3

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

    DIV1
    DIV2
    DIV3

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

    DIV1
    DIV2
    DIV3

縦方向の配置 align-items

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

    DIV1
    DIV2
    DIV3

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

    DIV1
    DIV2
    DIV3

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

    DIV1
    DIV2
    DIV3

子要素の個別配置 align-self

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

    DIV1
    DIV2
    DIV3

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

    DIV1
    DIV2
    DIV3

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

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

    DIV1
    DIV2
    DIV3

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

    DIV1
    DIV2
    DIV3

折返し flex-wrap

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

    DIV1
    DIV2
    DIV3
    DIV4
    DIV5
    DIV6
    DIV7
    DIV8
    DIV9

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

    DIV1
    DIV2
    DIV3
    DIV4
    DIV5
    DIV6
    DIV7
    DIV8
    DIV9

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

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

    DIV1
    DIV2
    DIV3

display:flex;のまとめ

使い方

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

用途

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

使用上の注意

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

 - CSS ,