1.容器的屬性
以下6個屬性設置在容器上
flex-direction 項目的排列方向
flex-wrap 換行
flex-flow <排列方向> + <換行>
justify-content 項目在主軸上（橫向）的對齊方式
align-items 項目在交叉軸（垂直方向）上如何對齊
align-content 對齊內容
1.1 flex-direction 方向
決定主軸的方向（即項目的排列方向）居灯。
四個值
1.flex-direction: row（默認）; 水平方向從左往右排列 起點在左端
2.flex-direction: row-reverse; 水平方向從右往左排列 起點在右端
3.flex-direction: column;垂直從上到下排列 起點在下沿
4.flex-direction: column-reverse;垂直方向從下到上排列 起點在下沿
1.row
2.row-reverse
3.column
4.column-reverse
1.2 flex-wrap 換行
默認情況下香椎，項目都排在一條線（又稱"橫向線"）上盖矫。flex-wrap屬性定義森逮，如果一條軸線排不下嚎京，如何換行
三個值
1.flex-wrap:nowrap 不換行（默認）
2.flex-wrap:wrap 換行 第一行在上方
3.flex-wrap:wrap-reverse 第一行在下方
1.nowrap
2.wrap
3.wrap-reverse
1.3 flex-flow 流動
flex-flow 是 flex-direction 方向 + flex-wrap 換行 的簡寫方式
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
flex-flow: row nowrap;（默認值 ）
1.4 justify-content 定義了項目在主軸上(橫向)對齊方式
屬性值
六個值
justify-content:flex-start;左對齊（默認）
justify-content:flex-end;右對齊
justify-content:center; 居中
justify-content: space-between; 兩端對齊 項目之間間隔相同
justify-content: space-around 每個項目兩側的間隔相等啃擦，所以項目之間的間隔比項目與邊框的間隔大一倍厨埋。
justify-content: space-evenly 平均分布
1.flex-start
2.flex-end
3.center
4.space-between
5.space-around
6.space-evenly
1.5 align-items 垂直對齊項目
定義了項目在主軸上的垂直對齊方式
align-items: flex-start; 交叉軸的起點對齊
align-items: flex-end;交叉軸的終點對齊
align-items: center;交叉軸的中點對齊
align-items: baseline;項目的第一行文字的基線對齊。
align-items: stretch;（默認值）如果項目沒有設置高度 將和日期對齊
1.flex-start
2.flex-end
3.center
4.baseline
5.stretch
未設置高度或者高度為auto將屏幕占滿
1.6 align-content 屬性定義了多根橫線的對齊方式劫扒。如果項目只有一根橫線檬洞，該屬性不起作用。（也就是需要有多行才能體現(xiàn)行于行之間的距離）
align-content：flex-start：頂部對齊
align-content：flex-end：底部對齊
align-content：center：垂直中間對齊
align-content：space-between：上下貼壁沟饥，中間均勻分布
align-content：space-around：每個元素之間的距離固定添怔，所以元素相交距離為2倍，類似元素為“回”字
align-content：space-evenly：均勻分布闷板，元素及border距離相等
align-content：stretch（默認值）：軸線占滿整個交叉軸澎灸。
1.flex-start
2.flex-end
3.center
4.space-between
5.space-around
6.space-evenly
7.stretch（默認值）
2.項目的屬性
以下6個屬性設置在項目上院塞。
order 順序
flex-grow 放大比例
flex-shrink 縮小比例
flex-basis 主要成分
flex 彎曲
align-self 對齊自身
2.1 order 順序
.item {
order: <integer>;
}
屬性定義的數(shù)字越小越靠前 遮晚，默認為0，可設置負數(shù)
2.2 flex-grow 放大比例
.item {
flex-grow: <number>; /* default 0 */
}
flex-grow屬性定義項目的放大比例拦止，默認為0县遣，即如果存在剩余空間，也不放大汹族。
如果所有項目的flex-grow屬性都為1萧求，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2顶瞒，其他項目都為1夸政，則前者占據(jù)的剩余空間將比其他項多一倍。
2.3 flex-shrink 縮小比例
.item {
flex-shrink: <number>; /* default 1 */
}
flex-shrink屬性定義了項目的縮小比例榴徐，默認為1守问，即如果空間不足，該項目將縮小坑资。
值越大縮小的越厲害
如果設置了flex-shrink就不會溢出
2.4 flex-basis屬性 級別比width更高
.item {
flex-basis: <length> | auto; /* default auto */
}
2.5 flex屬性
放大默認0 縮小默認1 寬度
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫耗帕，默認值為0 1 auto。后兩個屬性可選袱贮。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)仿便。
建議優(yōu)先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值嗽仪。
2.6 align-self屬性 自身特別的對齊方式
align-self屬性允許單個項目有與其他項目不一樣的對齊方式荒勇，可覆蓋align-items屬性。默認值為auto闻坚，表示繼承父元素的align-items屬性枕屉，如果沒有父元素，則等同于stretch鲤氢。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
該屬性可能取6個值搀擂，除了auto，其他都與align-items屬性完全一致卷玉。
3.以下是 flex 布局的一些應用
<!-- HTML -->
<div className='father'>
<div className='son'>css</div>
<div className='son'>flex</div>
<div className='son'>布局</div>
<div className='son'>dome</div>
<div className='son'>梁梁</div>
</div>
1.水平居中排列
/* CSS */
.box{
display: flex; *
justify-content: center; *
align-items: center; *
}
//或
.box{
display: flex;// 或inline-flex
justify-content: center;
.son{
align-self: center;
}
}
//或
.box{
display: flex;
place-content: center;
.son{
align-self: center;
}
}
//或
.box{
display: flex;
place-content: center;
place-items: center;
}
2.水平居中垂直排列 多個元素
.box{
display: flex; *
justify-content: center; *
align-items: center; *
flex-direction: column;* 跟水平居中排列代碼相同 只需要改變方向
}
屬性等價關系
.main{
place-content: center;
place-items: center;
}
//等價于
.main{
align-content: center;
justify-content: center;
align-items: center;
justify-items: center;
}
//多行 垂直水平居中
.main{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
如果只有一個Flex項目時 可以設置margin:auto中水平垂直居中
.father{
display: flex;// 或 inline-flex
.son{
margin: auto;
}
}
