IE11検証:Flexboxでナビ周り実装と論理プロパティ使用時

Pocket
LINEで送る

まずは参考サイト


皆の先生Colissさんの記事です。基本的な解説は上記ページを参照してください。
なんとIEはCODEPENが使用できない(見ることもできない)ので、IEチェック用にデモページを作成しました。

デモページ

<div class="wrap">
  <div class="item_box">item01</div>
  <div class="item_box">item02</div>
  <div class="item_box">item03</div>
</div>
section .wrap {
  display: flex;
  padding: 10px;
  background: #fff;
}

を基本形に展開しています。

デモページの内容

  1. デフォルト
  2. 一個右寄せ
  3. 一個右寄せ:論理プロパティ使用
  4. 一個右下
  5. 一個右下:論理プロパティ使用
  6. 一個右下:おまけ
  7. 一個右下:おまけ IE対応
IE11チェック用デモページ

論理プロパティ

便利な記述なのですが、なんとIEとEdgeは論理プロパティが使用できません。
EdgeはともかくIEでは使えるようにはならないと思うので、使用する際は事前に対応ブラウザの確認が必須ですね。

論理プロパティについて詳しくはカスケーディングスタイルシート | MDNの解説ページ、Colissさんの記事を参照してください。


Pocket
LINEで送る

back to top