彈性盒模型：css3引入了新的盒子模型棘钞。官方稱為CSS Flexible Box Layout Module，用于實現(xiàn)容器里項目的對齊究履、方向抗悍、排序（即使在項目大小位置驹饺、動態(tài)生成的情況）
彈性盒模型寫法：display: flex; 寫在父級元素上，使下面的子級產(chǎn)生變化
彈性盒模型需要了解什么是主軸什么是側(cè)軸缴渊，下面有一張圖
主軸就是決定元素是怎樣的排列方式 水平排列還是垂直排列
flex-direction:主軸方向設(shè)置(row/row-reverse/column/column-reverse)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box {
height: 500px;
border: 2px solid #000;
display: flex;
flex-direction：row;
}
#box div {
width: 100px;
height: 100px;
background: Red;
border: 2px solid #000;
color: #fff;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>\
</div>
</body>
</html>
row（默認值）：主軸為水平方向赏壹，起點在左端。
row-reverse：主軸為水平方向衔沼，起點在右端蝌借。
column：主軸為垂直方向田柔，起點在上沿。
column-reverse：主軸為垂直方向骨望，起點在下沿。
justify-content:主軸對齊(flex-start/flex-end/center/space-between/space-around)
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊欣舵，項目之間的間隔都相等擎鸠。
space-around：每個項目兩側(cè)的間隔相等。
align-items: 側(cè)軸對齊(flex-start/flex-end/center)
flex-start：交叉軸的起點對齊缘圈。
flex-end：交叉軸的終點對齊劣光。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊糟把。
stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto绢涡，將占滿整個容器的高度。
flex-wrap: 換行(nowrap/wrap/wrap-reverse);
nowrap（默認）：不換行遣疯。當子元素超出邊框也不會換行繼續(xù)顯示雄可，元素沒有設(shè)置寬度，元素會平均分配寬度
wrap：換行缠犀，第一行在上方数苫。
wrap-reverse：換行，第一行在下方辨液。
主軸為row或者row-reverse 默認側(cè)軸為 從上到下 如果添加了wrap-reverse 側(cè)軸方向為從下到上
主軸為column或者column-reverse 默認側(cè)軸為 從左到右 如果添加了wrap-reverse 側(cè)軸方向為從右到左
align-content 行對齊:(flex-start/flex-end/center/space-between/space-around)
效果和側(cè)軸對齊用法一樣虐急，有多行的情況下用行對齊，單行的情況則用側(cè)對齊
子元素的樣式設(shè)置
flex: number|auto|none;
元素的尺寸= 元素的flex/flex之和*父級剩余寬度
#box {
height: 200px;
border: 2px solid #000;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
#box div {
width: 100px;
height: 100px;
background: Red;
border: 2px solid #000;
color: #fff;
/* flex: auto; */
}
#box div:nth-of-type(1){
flex: 1;
}
#box div:nth-of-type(2){
flex: 2;
}
#box div:nth-of-type(3){
flex: 3;
}
#box div:nth-of-type(4){
flex: 4;
}
#box div:nth-of-type(5){
flex: 5;
order:-1
}
每個元素的顯示寬度
order 排序: 數(shù)值越大越往后排
默認值 0滔迈，可接受負值
align-self( auto | flex-start | flex-end | center)
以上就是彈性盒模型的用法止吁，不過除了flex 因為兼容性的原因 還有老版的寫法 需要在不同的內(nèi)核下添加前綴來使用
display:box; display:inline-box;
老版本在使用的時候需要加前綴：
display: -webkit-box;
內(nèi)嵌不會像新版變成塊級，沒有換行 塊級元素在一行顯示
寫法不一樣外 下面的功能對比新版都是差不多的
box-orient 定義主軸方向 (horizontal|vertical)
box-direction 定義元素的排列順序(normal|reverse )
box-pack: 主軸方向富粤呛罚空間管理(start|center|end|justify )
box-align: 側(cè)軸(垂直于主軸的方向)方向富跃吹耄空間管理(start|center|end)
box-flex 定義子元素的彈性尺寸
box-ordinal-group 定義子元素的排列順序
1.最小值1
2.默認值大小為1
3.數(shù)值越大排列越靠后
-end-
