仕様
状態:-
閲覧数:1,845
投稿日: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> |
「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仕様に準拠しているかどうかは不明
・うまくいっているように見えているだけかも