一、容器指定flex布局：

　　.box{

　　　　display:flex;//塊級元素設(shè)置

　　}

　　.box{

　　　　display:inline-flex;//行內(nèi)元素設(shè)置

　　}

　　.box{　

　　　　display:-webkit-flex;//webkit內(nèi)核

　　　　display:flex;

　　}

二、容器的屬性

　　<1>flex-direction(決定主軸的方向，即項目的排列方向)

　　　　.box{

　　　　　　flex-direction:row | rowreverse | column | columnreverse

　　　　}

　　　　row：默認(rèn)值；主軸為水平方向，起點在左端

　　　　row-reverse：主軸為水平方向，起點在右端

　　　　column：主軸為垂直方向，起點在上沿

　　　　column-revese：主軸為垂直方向，起點在下沿

　　<2>flex-wrap(如果一條軸線排不下，如何換行)

　　　　.box{

　　　　　　flex-wrap:nowrap | wrap | wrap-reverse

　　　　}

　　　　nowrap：不換行

　　　　wrap：換行，第一行在上方

　　　　wrap-reverse：換行，第一行在下方

　　<3>flex-flow(flex-direction和flex-wrap的組合;默認(rèn)值row nowrap)

　　　　.box{

　　　　　　flex-flow:<flex-direction> || <flex-wrap>

　　　　}

　　<4>justify-content（項目在主軸上的對齊方式）

　　　　.box{

　　　　　　justify-content:flex-start | flex-end | center | baseline | stretch

　　　　}

　　　　flex-start：左對齊(默認(rèn)值)

　　　　flex-end：右對齊

　　　　center：居中對齊

　　　　space-between：兩端對齊，項目之間間隔相等

　　　　space-around：項目兩側(cè)間隔相等

　　<5>align-items（在交叉軸上如何對齊）

　　　　.box{

　　　　　　align-items:flex-start | flex-end | center | baseline | stretch

　　　　}

　　　　flex-start：交叉軸的起點對齊

　　　　flex-end：交叉軸的終點對齊

　　　　center：交叉軸的中點對齊

　　　　baseline：第一行文字基線對齊

　　　　stretch：默認(rèn)值，占滿容器

　　<6>align-content

　　　　.box{

　　　　　　align-content:flex-start | flex-end | center | space-between | space-around | stretch

　　　　}

　　　　flex-start：交叉軸起點對齊

　　　　flex-end：交叉軸終點對齊

　　　　center：交叉軸中點對齊

　　　　space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布

　　　　space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍

　　　　stretch：默認(rèn)值；軸線占滿整個交叉軸

總結(jié)

以上是生活随笔為你收集整理的Flex 布局教程(弹性布局)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。