今天用到彈性佈局的時候，不小心忽略了彈性佈局分爲容器屬性和項目屬性
就比如我想讓三個class=box的div在一行顯示，我寫了如下代碼
.box{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: blue;
display: flex;
}
然而display：flex是應該設置給div父元素的屬性，也就是容器的屬性，應該這樣寫
body{
display: flex;
}
.box{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: blue;
}
發現對彈性佈局掌握並不熟練，於是來做個總結
文章目錄
·基本概念
在彈性佈局中，有兩根軸線：
水平方向的主軸
垂直方向的交叉軸
Flex佈局分項目與容器。 容器指的就是彈性盒本身（即父元素），項目指的是內部的子元素。
·容器屬性
容器屬性指的是放在容器選擇器樣式列表中的屬性
display:flex;
擁有該屬性的元素就是容器。
當該元素擁有該屬性時，子元素的float、vertical等屬性都將失效。子元素就是項目。所有的項目按照主軸的方向排列成一排。
flex-direction
該屬性決定主軸的方向: 默認是row
可選值有： row、 column、 row-reverse、 column-reverse
row：默認值，水平從左到右排列
row-reverse: 水平從右到左排列
column：垂直 從上到下排列
column-reverse：垂直 從下到上排列
flex-wrap
該屬性用於決定容器內的項目是否換行，以及如何換行
可選值： nowrap、wrap、wrap-reverse
nowrap 不換行
wrap 換行 往下排列
wrap-reverse 換行 往上排列
justify-content
該屬性決定項目在容器的主軸上的排列方式
可選值：
flex-start (默認值) 靠左
flex-end 靠右
center 居中
space-between 開頭的項目與結尾的項目是貼邊的 中的空白平分
space-around 每一個項目的左右空白距離相等
space-evenly 每一個空白都相等
align-items
該屬性決定項目在容器中的垂直方向的對齊
可選值:
stretch 默認值 上貼頂 下貼底
flex-start 貼頂
flex-end 貼底
center 居中
baseline 文本基線對齊
align-content
當有多根軸線時纔會生效，決定多根軸線在容器中的排列方式
可選值：
stretch 默認值 表示填滿
flex-start 貼頂
flex-end 貼底
center 居中
space-around 每一個軸線的空白距離相等
space-between 第一根軸線 貼頂 最後一根軸線 貼底 平分空白
space-evenly 每一個空白都相等
·項目屬性
flex-grow
該屬性決定項目的放大比例。
放大規則： 先計算容器寬度，再計算每一個項目的width、flex-basis、內容寬之和。剩餘的部分按照每一個項目的flex-grow之和平分。每一個項目佔自己的flex-grow值份。
flex-shrink
該值決定縮小比例
計算規則： 計算容器寬度A，計算所有項目的實際寬度之和B，如果B大於A。此時flex-shrink屬性生效。
(B - A) / 所有項目的flex-shrink屬性之和 = C。 就是shrink值爲1所應當縮小的值。再每一個項目就縮小shrink值*C
flex-basis
該屬性決定項目所佔寬度，優先於width與內容
優先級: flex-basis > width > 內容寬
flex
該屬性是一個融合屬性 分別表示 flex-grow flex-shrink flex-basis
flex: 0 1 auto; 後兩個屬性可以省略
等價於
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order
該屬性決定項目在容器中的排列順序
默認值是1 越小越靠前
align-self
該屬性決定項目在容器中的垂直方向的對齊方式，會覆蓋父容器的align-items。
可選值：
stretch 默認值 上貼頂 下貼底
flex-start 貼頂
flex-end 貼底
center 居中
baseline 文本基線對齊