HTML+CSS3でwebサイトを構築していました。
レスポンシブデザインで簡単にレイアウト出来る方法ないかなあ、と思いGoogle先生に聞いてみました。
すると、「flexbox」というものに出会いました。
簡単なサンプル
4カラム
HTML
[sourcecode language=”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>
[/sourcecode]
css
[sourcecode language=”css”]
.flex-card-box section {
margin: 5px;
background: #e2f1ff;
padding: 15px;
flex:1;
-webkit-flex: 1; /* safari */
}
[/sourcecode]
レスポンシブ対応
css
[sourcecode language=”css”]
@media screen and (max-width: 700px) {
.flex-card-box {
flex-direction: column;
}
.flex-card-box section{
flex:none;
}
}
[/sourcecode]
簡単な解説
基本的なところ(1)
[sourcecode language=”css”]
.flex-card-box section {
flex:1;
-webkit-flex: 1; /* safari */
}
[/sourcecode]
「flex」プロパティは、「flex-grow」「flex-shrink」「flex-basis」のショートハンドです。IE11のデフォルトは「0 0 auto」です。
それぞれは、最下部の参考URL先をを確認してください。
困ったところ
[sourcecode language=”css”]
.flex-card-box section {
flex:1;
}
[/sourcecode]
上記だけだと、IE11の場合、幅を小さくしていくと、文字がsectionからはみ出してしまいました。
[sourcecode language=”css”]
@media screen and (max-width: 700px) {
.flex-card-box section{
flex:none;
}
}
[/sourcecode]
ですので、上記を追加し、リセットします。
これでIE11でも幅を狭めたとしても、文字がsectionからはみ出さずにsectionが伸びてくれます。
[sourcecode language=”css”]
.flex-card-box section {
flex-grow:1;
}
[/sourcecode]
これでしていすると、IE11では、「flex-direction: column;」のとき文字がはみ出ることはなかったのですが、「flex-direction: row」の時、幅が均等に割り符割れませんでした。なぜだ…!
コメント