HTML+CSS3でwebサイトを構築していました。
レスポンシブデザインで簡単にレイアウト出来る方法ないかなあ、と思いGoogle先生に聞いてみました。
すると、「flexbox」というものに出会いました。
簡単なサンプル
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」の時、幅が均等に割り符割れませんでした。なぜだ…!
コメント