淺談flex佈局

Flex佈局，俗稱彈性佈局，有了這個佈局，我們作的事情不少，之前那些很難實現好比說垂直居中之類都不存在了。

盒模型佈局依賴於float，display，定位之類的方式來佈局，這種的佈局對一些特殊佈局來講很不方便，就如上面的垂直居中就不太好實現。

如今就讓我來介紹一個Flex佈局方式

他中的一些屬性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

在這裏，聲明一點，使用了display：flex；佈局，其子元素內的float、clear和vertical-align屬性將失效

flex-direction屬性

.box { flex-direction: row | row-reverse | column | column-reverse; }

• row（默認值）：主軸爲水平方向，起點在左端。
• row-reverse：主軸爲水平方向，起點在右端。
• column：主軸爲垂直方向，起點在上沿。
• column-reverse：主軸爲垂直方向，起點在下沿。

flex-wrap屬性

.box{ flex-wrap: nowrap | wrap | wrap-reverse; }

（1）nowrap（默認）：不換行。

 

（2）wrap：換行，第一行在上方。

 

（3）wrap-reverse：換行，第一行在下方。

 

flex-flow屬性

屬性是屬性和屬性的簡寫形式，默認值爲。

.box { flex-flow: <flex-direction> || <flex-wrap>; }flex-flowflex-directionflex-wraprow nowrap

 justify-content屬性

.box { justify-content: flex-start | flex-end | center | space-between | space-around; }

• flex-start（默認值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊，項目之間的間隔都相等。
• space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

align-items屬性

align-items屬性定義項目在交叉軸上如何對齊

.box { align-items: flex-start | flex-end | center | baseline | stretch; }

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。
• stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

 

align-content屬性

 

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

• flex-start：與交叉軸的起點對齊。
• flex-end：與交叉軸的終點對齊。
• center：與交叉軸的中點對齊。
• space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
• space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
• stretch（默認值）：軸線佔滿整個交叉軸。