一、用于父元素上面的屬性
1入偷、display: flex
2追驴、flex-direction
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
主軸和交叉軸的切換
3、flex-wrap
元素在軸上排不上的情況下疏之，如何換行
- nowrap（默認）：不換行殿雪。
- wrap：換行，第一行在上方锋爪。
- wrap-reverse：換行丙曙，第一行在下方。
4其骄、flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式亏镰，默認值為row nowrap。
.box {
flex-flow: row-reverse wrap-reverse
}
5拯爽、justify-content
屬性定義了項目在主軸上的對齊方式索抓。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
- flex-start（默認值）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊，項目之間的間隔都相等毯炮。
- space-around：每個項目兩側(cè)的間隔相等逼肯。所以，項目之間的間隔比項目與邊框的間隔大一倍桃煎。
- space-evenly：兩側(cè)和中間的間距都相等
6篮幢、align-items
屬性定義了項目在交叉軸上的對齊方式。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
- flex-start：交叉軸的起點對齊备禀。
- flex-end：交叉軸的終點對齊洲拇。
- center：交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊曲尸。
- stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto赋续，將占滿整個容器的高度。
7另患、align-content
屬性定義了多根軸線的對齊方式纽乱。如果項目只有一根軸線，該屬性不起作用昆箕。其值和justify-content是相同的鸦列。
二、用于子元素的屬性
1鹏倘、flex-grow
屬性定義項目的放大比例薯嗤，默認為0。決定是否占據(jù)了剩余的空間纤泵。
2骆姐、flex-shrink
- 父元素過小的時候，是否會擠壓自己的空間。屬性定義了項目的縮小比例玻褪，默認為1肉渴。
- 如果所有項目的flex-shrink屬性都為1，當(dāng)空間不足時带射，都將等比例縮小同规。如果一個項目的flex-shrink屬性為0，其他項目都為1窟社，則空間不足時券勺，前者不縮小。
- 負值對該屬性無效桥爽。
3朱灿、flex-basis
定義了元素的起始寬度，可以替代width钠四。它的默認值為auto盗扒，即項目的本來大小。
4缀去、flex
- flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫侣灶，默認值為0 1 auto。后兩個屬性可選缕碎。
- 該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)褥影。
- 建議優(yōu)先使用這個屬性，而不是單獨寫三個分離的屬性咏雌，因為瀏覽器會推算相關(guān)值
5凡怎、 align-self
允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性赊抖。
6统倒、order
屬性定義項目的排列順序。數(shù)值越小氛雪，排列越靠前房匆，默認為0。
7报亩、其他
（1）flex: 1的意思
flex-grow:1;
flex-shrink:1;
flex-basis:0%
這幾個參數(shù)得多用用才能理解
https://blog.csdn.net/m0_58875326/article/details/124444419
（2）Flex布局如何實現(xiàn)最后一個元素右對齊（CSS）
在最后一項元素使用樣式：
margin-left: auto;
這里就涉及到margin:auto的使用浴鸿，通常情況下，他會使元素達到居中對齊弦追，因為兩邊自動占據(jù)可用空間岳链；而margin-left:auto 或者 margin-right?:auto則會使一邊占據(jù)空間，從而達到右對齊或者左對齊的目的
