2018-5-14 seo達(dá)人
任何一個(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:
(排列方向橫向還是縱向)
(默認(rèn)值):主軸為水平方向,起點(diǎn)在左端。
row
:主軸為水平方向,起點(diǎn)在右端。
row-reverse
:主軸為垂直方向,起點(diǎn)在上沿。
column
:主軸為垂直方向,起點(diǎn)在下沿。
column-reverse
flex-wrap:(如何換行)
(默認(rèn)):不換行。
nowrap
:換行,第一行在上方。
wrap
:換行,第一行在下方。
wrap-reverse
flex-flow:(flex-direction
和flex-wrap簡稱,
justify-content:(橫向?qū)R方式)默認(rèn)值為
)row nowrap
flex-start
(默認(rèn)值):左對(duì)齊
:右對(duì)齊
flex-end
: 居中
center
:兩端對(duì)齊,項(xiàng)目之間的間隔都相等
space-between
space-around
:每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
align-items:(縱向?qū)R方式)
flex-start
:交叉軸的起點(diǎn)對(duì)齊。
:交叉軸的終點(diǎn)對(duì)齊。
flex-end
:交叉軸的中點(diǎn)對(duì)齊。
center
: 項(xiàng)目的第一行文字的基線對(duì)齊
baseline
stretch
(默認(rèn)值):如果項(xiàng)目未設(shè)置高度或設(shè)為auto,將占滿整個(gè)容器的高度。
align-content:(多根軸線的對(duì)齊方式)
:與交叉軸的起點(diǎn)對(duì)齊。
flex-start
:與交叉軸的終點(diǎn)對(duì)齊。
flex-end
:與交叉軸的中點(diǎn)對(duì)齊。
center
:與交叉軸兩端對(duì)齊,軸線之間的間隔平均分布。
space-between
:每根軸線兩側(cè)的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍
space-around
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ì)( tweetduck.com )是一家專注而深入的界面設(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com