支持瀏覽器: IE11, Chrome29+, FireFox 20+, Safari加前綴 -webkit-
概述:
總的來說就是12個屬性;
關于容器的6個,5個單一屬性,分別定義了元素排列的方向, 行, 水平排列, 垂直排列, 空白分布, 和一個簡寫屬性, 方向,行
關于容器內元素的6個, 5個單一屬性, 分別定義元素的順序, 伸展, 收縮, 初始尺寸, 對齊, 和一個簡寫屬性 描述元素尺寸
container : display: flex | inline-flex; | 說明 |
flex-direction: row | column | row-reverse | column-reverse | 元素在容器內的排列方向 |
flex-wrap: nowrap | wrap | wrap-reverse | 元素一行或多行顯示 |
flex-flow: <flex-direction> <flex-wrap> default: <row nowrap> | 上面兩個屬性的簡寫 |
justify-content: flex-start | flex-end | center | space-between | space-around | 水平方向上, 元素在容器內的分布 |
align-items: stretch | flex-start | flex-end | center | baseline | 垂直方向上, 元素在容器內的分布 |
align-content: stretch | flex-start | flex-end | center | space-between | space-around | 在容器內, 額外的空白部分的分布 |
Container items : | |
order: <number> 0 | 元素在容器內的排列順序 |
align-self: auto | flex-start | flex-end | center | baseline | stretch | 覆蓋align-items的值, 定義自身在垂直方向上的分布 |
flex-grow: <number> 0 | 元素在容器內所占空間的伸展 |
flex-shrink: <number> 1 | 元素在容器內所占空間的收縮 |
flex-basis: <width> auto | 初始化時, 元素在容器內的尺寸 |
flex: <flex-grow> <flex-shrink> <flex-basis> <0 1 auto> | 上面三個屬性的簡寫 |
*以上<number>不支持負值;
*每個屬性的第一個取值為默認值;
*藍色為多個屬性簡寫模式;
兼容IE10:加前綴 -ms-
display:-ms-flexbox | -ms-inline-flexbox; | standard (橙色為item屬性) |
-ms-flex-direction : row | column | row-reverse | column-reverse | flex-direction |
-ms-flex-wrap : none | wrap | wrap-reverse | flex-wrap |
不支持 | flex-flow |
-ms-flex-pack : start | end |center | justify | justify-content |
-ms-flex-align : stretch | start | end |center | baseline | align-items |
-ms-flex-line-pack : start | end |center | baseline | align-content |
-ms-flex-order : <number> | order |
-ms-flex-item-align : stretch | start | end |center | baseline | align-self |
-ms-flex : <positive-flex> <negative-flex> <preferred-size> || none | flex : 0 0 auto |
*IE10之前不建議使用,可以嘗試用display:table;
關于Chrome,FireFox舊版本支持:
FireFox:把 -webkit- 換成 -moz- 即可
container : display: -webkit-flexbox | -webkit-inline-flexbox; | standard (橙色為item屬性) |
| -webkit-box-direction: normal | reverse -webkit-box-orient: horizontal | vertical | flex-direction |
不支持 | flex-wrap |
不支持 | flex-flow |
-webkit-box-pack: flex-start | flex-end | center | space-between | space-around | justify-content |
不支持 | align-content |
-webkit-box-align: stretch | flex-start | flex-end | center | baseline | align-items |
-webkit-box-ordinal-group:<number> | order |
-webkit-box-flex: <number> 1 | flex-grow |
-webkit-flex-shrink: <number> 0 | flex-shrink |
-webkit-flex-basis: <width> auto (無-moz-) | flex-basis |
-webkit-box: <flex-grow> <flex-shrink> <flex-basis> <1 0 auto> | flex |
不支持 | align-self |
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
