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

Update:

まずは参考サイト

CSS Flexboxでナビゲーションを実装する時に役立つ、オートマージン（margin: auto...
ナビゲーションを実装する時、アイテムを左端に詰めて配置したいけど、1つだけ右端に配置したい、そんな時はFlexboxでオートマージン（margin: auto;）を使用すると簡単です。また、論理プロパ

皆の先生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さんの記事を参照してください。

論理的プロパティと値の基本概念
「論理的プロパティと値」仕様書では、 CSS のたくさんのプロパティや値のフローに関する対応付けを紹介しています。この記事はこの仕様書を紹介し、フローに関するプロパティと値を説明します。

[CSS]知っておくと便利な論理プロパティ、ボックスモデルにおける古い方法とこれか...
現在のところ、margin-top, padding-bottomのように物理プロパティをボックスモデルで使用していると思います。しばらくはそのままで問題ないですが、CSS GridやFlexboxで

関連記事: