Flex意為“彈性布局”饶辙，其定義方式如下：
.box{
display:flex; //普通元素
}
.box2{
display:inline-flex; //行內(nèi)元素
}
.box3{
display:-webkit-flex; //webkit內(nèi)核的瀏覽器
}
當(dāng)定義好Flex布局后突照，布局中的元素將被如下圖規(guī)劃默穴。
Flex布局中的規(guī)劃
能夠?qū)Ξ?dāng)前div（.box）設(shè)置的屬性有以下六個
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
分別介紹各個屬性的用途。
flex-direction 用于決定主軸的方向
flex-direction: row | row-reverse | column | column-reverse
//分別為 水平方向 左起點(default) | 水平方向 右起點 | 水平方向 右起點 | 垂直方向 下起點
flex-wrap 用于定義換行方式
flex-wrap: nowrap | wrap | wrap-reverse;
//分別為 不換行 | 換行 第一行在頂端 | 換行 第一行在底部
justify-content 用于定義主軸上的對齊方式
justify-content: flex-start | flex-end | center | space-between | space-around;
//和主軸方向有關(guān)刮便，本例假設(shè)主軸從左到右
//左對齊(default) | 右對齊 | 居中 | 兩段對齊 | 每個項目兩側(cè)間距相等
主軸對齊方式圖例
align-items 用于定義在交叉軸上如何對齊
align-items: flex-start | flex-end | center | baseline | stretch;
//起點對齊 | 終點對齊 | 居中對齊 | 各項目首行文字對齊 | 若未設(shè)置高度或auto則占滿整個容器(default)
align-content 用于定義多軸線的對齊方式 若僅有一根軸線 則不起作用
- flex-start：與交叉軸的起點對齊空猜。
- flex-end：與交叉軸的終點對齊。
- center：與交叉軸的中點對齊。
- space-between：與交叉軸兩端對齊辈毯，軸線之間的間隔平均分布坝疼。
- space-around：每根軸線兩側(cè)的間隔都相等。所以谆沃，軸線之間的間隔比軸線與邊框的間隔大一倍钝凶。
- stretch（默認(rèn)值）：軸線占滿整個交叉軸。
利用Flex布局實現(xiàn)水平垂直居中的代碼
注：在container中的div將相對于container居中
.container{
width: 100%;
height: 600px;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
