91成人精品,神马影院东京干,国产一级做a爰片久久 亚洲日韩欧美一区二区三区_国产AV无码专区亚洲AV

css布局——flex布局

2018-5-14    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里、

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

圖片


容器屬性：

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

圖片

flex-wrap：（如何換行）
nowrap（默認(rèn)）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。

flex-flow：（flex-direction和flex-wrap簡(jiǎn)稱，默認(rèn)值為row nowrap）

justify-content：（橫向?qū)R方式）
flex-start（默認(rèn)值）：左對(duì)齊
flex-end：右對(duì)齊
center： 居中
space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等
space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

圖片

align-items：（縱向?qū)R方式）
flex-start：交叉軸的起點(diǎn)對(duì)齊。
flex-end：交叉軸的終點(diǎn)對(duì)齊。
center：交叉軸的中點(diǎn)對(duì)齊。
baseline: 項(xiàng)目的第一行文字的基線對(duì)齊
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。

圖片

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

圖片

 
box屬性：


order：（排列順序）
數(shù)值越小，排列越靠前，默認(rèn)為0。

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

圖片

flex-shrink：（box縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮?。?br style="box-sizing:border-box;outline:0px;word-break:break-all;" />
圖片

flex-basis：（box占據(jù)的寬度或高度）

圖片

align-self：（單個(gè)box的對(duì)齊方式，與其他box對(duì)齊方式）

圖片藍(lán)藍(lán)設(shè)計(jì)( m.b186.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔