99ri国产在线观看,黄色激情网站,免费一区二区三区

css布局——flex布局

2018-5-14 seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里、

Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為 Flex 布局。
.box{ display: flex;}
行內元素也可以使用 Flex 布局。.box{ display: inline-flex;}
Webkit 內核的瀏覽器display: -webkit-flex;
設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

容器屬性：

flex-direction：（排列方向橫向還是縱向） row（默認值）：主軸為水平方向，起點在左端。row-reverse：主軸為水平方向，起點在右端。column：主軸為垂直方向，起點在上沿。column-reverse：主軸為垂直方向，起點在下沿。

flex-wrap：（如何換行）nowrap（默認）：不換行。wrap：換行，第一行在上方。wrap-reverse：換行，第一行在下方。
flex-flow：（flex-direction和flex-wrap簡稱，默認值為row nowrap）justify-content：（橫向對齊方式）
flex-start（默認值）：左對齊flex-end：右對齊center：居中space-between：兩端對齊，項目之間的間隔都相等
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

align-items：（縱向對齊方式）
flex-start：交叉軸的起點對齊。flex-end：交叉軸的終點對齊。center：交叉軸的中點對齊。baseline: 項目的第一行文字的基線對齊
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

align-content：（多根軸線的對齊方式）flex-start：與交叉軸的起點對齊。flex-end：與交叉軸的終點對齊。center：與交叉軸的中點對齊。space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
stretch（默認值）：軸線占滿整個交叉軸。

box屬性：

order：（排列順序）
數值越小，排列越靠前，默認為0。

flex-grow：（剩余空間分配，box放大比例，默認為0，即如果存在剩余空間，也不放大）

flex-shrink：（box縮小比例，默認為1，即如果空間不足，該項目將縮小）

flex-basis：（box占據的寬度或高度）

align-self：（單個box的對齊方式，與其他box對齊方式）

藍藍設計( www.wtxcl.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

« 這些小小的改變，能夠讓UI動效更上一層樓騰訊課堂和網易云課堂產品體驗，從用戶體驗角度進行競品分析 »

css布局——flex布局

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里、

分類

日歷

鏈接

個人資料

存檔

css布局——flex布局

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里、

分類

日歷

鏈接

個人資料

存檔

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里、