box-lines
box-linesプロパティはFlexアイテムがFlexコンテナボックスの横幅から溢れた際の挙動を制御するための古いプロパティです。
当初は溢れた際の挙動の制御にはこのbox-linesプロパティで仕様策定が進められていましたが、最終的には「flex-wrap」が採用されました。
box-linesプロパティを利用する際にはflex-wrapも併用して指定してください。
box-linesプロパティは以下の値を取ることができます。
値 | 振る舞い |
---|---|
single | 改行せずFlexコンテナボックス内に収まろう縮小し表示される |
multiple | 改行し縮小しないで表示される |
box-linesプロパティはFlexコンテナボックスに対して指定を行います。
.flex{
display : -webkit-box; /* for so old webkit browser */
display : -ms-flexbox; /* for IE10 */
display : -webkit-flex; /* for old webkit browser */
display : flex;
-webkit-box-lines : single; /* for so old webkit browser */
-ms-flex-direction : nowrap; /* for IE10 */
-webkit-flex-direction : nowrap; /* for old webkit browser */
flex-direction : nowrap;
padding:2px;
background: black;
}
対応ブラウザ
IE | Edge | Chrome | Safari | Firefox | iOS | Android | |
---|---|---|---|---|---|---|---|
box-lines | ☓ | ☓ | △ 4〜 | △ 3.1〜 | △ 2〜 | △ 3.2〜 | △ 2.1〜 |
flex-wrap | △ 10 ○ 11 |
○ 12〜 | △ 21〜 ○ 29〜 |
△ 6.1〜 ○ 9〜 |
△ 18〜 ○ 28〜 |
△ 7.1〜 ○ 9〜 |
○ 4.4〜 |
◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
登録日 : 2015年10月07日 最終更新日 : 2015年10月8日