レスポンシブデザインに有効な「flexbox」。「flex-direction: column;」を指定するとIE11で内容がはみ出る問題。

HTML,CSS

2016.03.18

HTML+CSS3でwebサイトを構築していました。
レスポンシブデザインで簡単にレイアウト出来る方法ないかなあ、と思いGoogle先生に聞いてみました。
すると、「flexbox」というものに出会いました。

簡単なサンプル
1. 4カラム
  1. HTML
  2. css
2. レスポンシブ対応
  1. css
簡単な解説
1. 基本的なところ(1)
2. 困ったところ
参考URL

簡単なサンプル

4カラム

HTML

<div class="flex-card-box">
  <section class="col01">
    <h1>Column 01</h1>
    <p>Sample Text</p>
  </section>
  <section class="col02">
    <h1>Column 02</h1>
    <p>Sample Text</p>
  </section>
  <section class="col03">
    <h1>Column 03</h1>
    <p>Sample Text</p>
  </section>
  <section class="col04">
    <h1>Column 04</h1>
    <p>Sample Text</p>
  </section>
</div>

css

.flex-card-box section {
  margin: 5px;
  background: #e2f1ff;
  padding: 15px;
  flex:1;
  -webkit-flex: 1; /* safari */
}

レスポンシブ対応

css

@media screen and (max-width: 700px) {
  .flex-card-box {
    flex-direction: column;
  }
  .flex-card-box section{
    flex:none;
  }
}

簡単な解説

基本的なところ(1)

.flex-card-box section {
  flex:1;
  -webkit-flex: 1; /* safari */
}

「flex」プロパティは、「flex-grow」「flex-shrink」「flex-basis」のショートハンドです。IE11のデフォルトは「0 0 auto」です。
それぞれは、最下部の参考URL先をを確認してください。

困ったところ

.flex-card-box section {
  flex:1;
}

上記だけだと、IE11の場合、幅を小さくしていくと、文字がsectionからはみ出してしまいました。

@media screen and (max-width: 700px) {
  .flex-card-box section{
    flex:none;
  }
}

ですので、上記を追加し、リセットします。
これでIE11でも幅を狭めたとしても、文字がsectionからはみ出さずにsectionが伸びてくれます。

.flex-card-box section {
  flex-grow:1;
}

これでしていすると、IE11では、「flex-direction: column;」のとき文字がはみ出ることはなかったのですが、「flex-direction: row」の時、幅が均等に割り符割れませんでした。なぜだ…!