例
使靈活的項目包裝必要時應:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: flex;
flex-wrap: wrap;
}
試一試» 定義和用法
在柔性包裝屬性指定靈活的項目是否應該換與否。
Note:如果這些元素不靈活的項目中,柔性包裝屬性沒有任何效果。
默認值: | nowrap |
---|---|
遺傳: | no |
動畫: | no. Read about animatable |
版: | CSS3 |
JavaScript語法: | object .style.flexWrap="nowrap" Try it |
瀏覽器支持
在表中的數字規定,完全支持該屬性的第一個瀏覽器版本。
其次是-webkit-號碼或-moz-指定用一個前綴工作的第一個版本。
屬性 | |||||
---|---|---|---|---|---|
flex-wrap | 29.0 21.0 -webkit- | 11.0 | 28.0 18.0 -moz- | 9 6.1 -webkit- | 17.0 |
CSS語法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
屬性值
值 | 描述 | 播放 |
---|---|---|
nowrap | 默認值。 指定靈活的項目不會換行 | 播放 ” |
wrap | 指定靈活的項目將包裹如有必要, | 播放 ” |
wrap-reverse | 指定該柔性物品將包裹,如果需要的話,以相反的順序 | 播放 ” |
initial | 將此屬性設置為默認值。 閱讀關於初始 | 播放 ” |
inherit | 繼承其父元素此屬性。 閱讀關於繼承 |
相關頁面
CSS參考: flex property
CSS參考: flex-flow property
CSS參考: flex-direction property
CSS參考: flex-basis property
CSS參考: flex-grow property
CSS參考: flex-shrink property
HTML DOM參考: flexWrap property