カテゴリー:
Flexible Box Layout Module
閲覧数:514 配信日:2016-01-13 21:53
デザイン仕様
1行目
・「Flexible Box」で1番目に指定した要素を左半分表示
・「Flexible Box」で2番目に指定した要素を右半分表示
2行目
・「Flexible Box」で3番目に指定した要素を左7割範囲で表示
・「Flexible Box」で4番目に指定した要素を右3割範囲で表示
コーディング例
▼HTML
<div class="flexdiv">
<p class="date"></p>
<h4></h4>
<p class="text"></p>
<img>
</div>
▼CSS
.flexdiv{
display:flex;
flex-flow: wrap; /*折り返しを許可、「複数行」*/
}
.flexdiv h4 {
order:1;
width:50%;
}
.flexdiv img {
order:2;
width:50%;
}
.flexdiv p.text {
order:3;
width:70%;
}
.flexdiv p.date {
order:4;
width:30%;
}!
CSS仕様に準拠しているかどうかは不明
・うまくいっているように見えているだけかも