仕様
状態:-
閲覧数:2,307
投稿日:2016-01-12
更新日:2016-01-12
よく使用する例
display:flex;
▼CSS
.flexdiv{
display:flex;
}▼HTML
<div class="flexdiv">
<任意のタグ1>
<任意のタグ2>
<任意のタグ3>
<任意のタグ4>
<任意のタグ5>
</div>
order:★★;
同じ番号を複数記述すると、HTML構成要素順に表示される
※重なって表示されたりはしない
▼CSS
.flexdiv h4 {
order:3;
}
.flexdiv img {
order:1;
}
.flexdiv p {
order:2;
}▼HTML
<div class="flexdiv">
<h4></h4>
<img>
<p></p>
</div>
「Flexible Box」の一つだけを横幅一杯に表示するためには、「width:100%;」＋ 改行指定
デザイン仕様
1行目
・「Flexible Box」の一つだけを横幅一杯に表示
2行目
・「Flexible Box」の残りを横並び表示
コーディング例
▼HTML
<div class="flexdiv">
<img>
<h4></h4>
<p></p>
</div>
▼CSS
.flexdiv{
display:flex;
flex-flow: wrap; /*折り返しを許可、「複数行」*/
}
.flexdiv h4 {
order:1;
width:100%;
}
.flexdiv img {
order:2;
}
.flexdiv p {
order:3;
width:70%;
}!
CSS仕様に準拠しているかどうかは不明
・うまくいっているように見えているだけかも
メディアクエリで使用
<style>
@media screen and (min-width:0px) and ( max-width:543px) { /*画面サイズ0px以上543px以下*/
.flexdiv{
display:flex;
flex-flow: wrap; /*折り返しを許可、「複数行」*/
}
.flexdiv h4 {
order:1;
width:100%;
}
.flexdiv img {
order:2;
}
.flexdiv p {
order:2;
width:70%;
}
}
@media (min-width: 544px) { /*画面サイズ544px以上*/
.card-columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.hero__example-link {
margin-top: -1.3rem;
margin-right: -1.3rem;
margin-left: -1.3rem;
text-align: center;
}
}
</style>
Flexible box の縦方向中央揃えは、「vertical-align: middle;」ではなく「align-items: center;」
「flex-flow: wrap;」と「flex-wrap: wrap;」は同じ意味
概要
flex-flow CSS プロパティは、flex-direction プロパティおよび flex-wrap プロパティのショートハンドプロパティ
一言で言うと
・同じ内容を簡単に(少ない記述で)書けるプロパティ
段組のような複雑な構成も可能だが、CSS仕様に準拠しているかどうかは不明
デザイン仕様
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仕様に準拠しているかどうかは不明
・うまくいっているように見えているだけかも