flex-flow
flex-flowプロパティはflex-directionプロパティとflex-wrapプロパティをまとめて指定できるプロパティです。
以下のようにflex-directionプロパティの値、flex-wrapプロパティの値をスペース区切りで記述します。
.selector{
flex-flow:[flex-direction] [flex-wrap];
}
具体的には、以下の指定を
.flex{
display : -ms-flexbox; /* for IE10 */
display : -webkit-flex; /* for old webkit browser */
display : flex;
-ms-flex-direction : row; /* for IE10 */
-webkit-flex-direction : row; /* for old webkit browser */
flex-direction : row;
-ms-flex-wrap : nowrap; /* for IE10 */
-webkit-flex-wrap : nowrap; /* for old webkit browser */
flex-wrap : nowrap;
padding:2px;
background: black;
}
以下のように省略して記述することが可能です。
.flex{
display : -ms-flexbox; /* for IE10 */
display : -webkit-flex; /* for old webkit browser */
display : flex;
-ms-flex-flow : row nowrap; /* for IE10 */
-webkit-flex-flow : row nowrap; /* for old webkit browser */
flex-flow : row nowrap;
padding:2px;
background: black;
}
対応ブラウザ
IE | Edge | Chrome | Safari | Firefox | iOS | Android | |
---|---|---|---|---|---|---|---|
flex-flow | △ 10 ○ 11 |
○ 12〜 | △ 21〜 ○ 29〜 |
△ 6.1〜 ○ 9〜 |
△ 18〜 ○ 28〜 |
△ 7.1〜 ○ 9〜 |
○ 4.4〜 |
◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
登録日 : 2015年10月07日 最終更新日 : 2015年10月8日