本文目錄
1.什么是彈性盒子Flex
2.Flex的屬性
3.項目item的屬性
3.小結(jié)
什么是彈性盒子Flex
Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個容器都可以通過display: flex;成為為Flex布局。
例如：
.container{
width: 100%;
height: 100vh;
background-color: #0f0;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
采用Flex布局的元素，被稱為Flex容器flex container叶堆，簡稱“容器”。其所有子元素自動成為容器成員斥杜，成為Flex項目虱颗，即：Flex item，簡稱“項目”果录。
容器默認存在兩根主軸：水平方向主軸(main axis)和垂直方向交叉軸(cross axis)上枕，默認項目按主軸排列。
main start/main end：主軸開始位置/結(jié)束位置弱恒；
cross start/cross end：交叉軸開始位置/結(jié)束位置辨萍；
main size/cross size：單個項目占據(jù)主軸/交叉軸的空間；
Flex的屬性
設(shè)置在容器上的屬性有6種:
flex-direction屬性：決定主軸的方向（即項目的排列方向）
flex-wrap屬性：定義換行情況
flex-flow屬性：flex-direction和flex-wrap的簡寫返弹，默認row nowrap
justify-content屬性：定義項目在主軸上的對齊方式锈玉。
align-items屬性：定義在交叉軸上的對齊方式
align-content屬性：定義多根軸線的對齊方式
-flex-direction屬性：決定主軸的方向。
flex-direction屬性：決定主軸的方向义起。說白了就是該屬性用來控制項目的排列方向拉背。該屬性可取值如下：row 、row-reverse 默终、column 或 column-reverse;
row（默認）：主軸水平方向椅棺，起點在左端；
row-reverse：主軸水平方向齐蔽，起點在右端两疚；
column：主軸垂直方向，起點在上邊沿含滴；
column-reserve：主軸垂直方向诱渤，起點在下邊沿。
-
flex-wrap屬性：定義換行情況
flex-wrap屬性：定義換行情況谈况。默認情況下勺美，項目都排列在一條軸線上递胧，但有可能一條軸線排不下。
該屬性可取值如下：nowrap赡茸、 wrap 或wrap-reverse;
nowrap（默認）：不換行缎脾；效果如下：
wrap：換行，第一行在上方坛掠；效果如下：
wrap-reverse：換行赊锚，第一行在下方治筒。效果如下：
-flex-flow屬性：flex-direction和flex-wrap的簡寫屉栓，默認row nowrap
熟悉了上面的屬性后，這里就沒啥好說的耸袜，該屬性只是把上面兩者flex-direction和flex-wrap組合一下而已友多。
-
justify-content屬性：定義項目在主軸上的對齊方式。
justify-content屬性：定義項目在主軸上的對齊方式堤框。該屬性可取值如下：start 域滥、end、flex-start 蜈抓、flex-end、 center 委可、 left腊嗡、right着倾、space-between 燕少、 space-around 、space-evenly 客们、stretch崇决、safe 底挫、 unsafe 凄敢、 baseline 、 first baseline扑庞、 last baseline;
flex-start（默認值）：左對齊
flex-end：右對齊罐氨；
center：居中；
space-between：兩端對齊塔嬉，項目之間間隔相等谨究；
space-around：每個項目兩側(cè)的間隔相等胶哲，即項目之間的間隔比項目與邊框的間隔大一倍鸯屿。
提示：對齊方式與軸的方向有關(guān)把敢，本文中假設(shè)主軸從左到右修赞。
flex-start（默認值）：左對齊榔组。效果如下：
flex-end：右對齊搓扯；效果如下：
center：居中锨推；效果如下：
space-between：兩端對齊椎椰，項目之間間隔相等；效果如下：
space-around：每個項目兩側(cè)的間隔相等休弃，即項目之間的間隔比項目與邊框的間隔大一倍。效果如下：
-align-items屬性：定義在交叉軸上的對齊方式
align-items屬性：定義在交叉軸上的對齊方式丈甸。該屬性可取值如下：flex-start 睦擂、flex-end 、center 、baseline 今膊、 stretch;
stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto伞剑，將占滿整個容器的高度黎泣。
flex-start：起點對齊抒倚；
flex-end：終點對齊托呕；
center：中點對齊项郊；
baseline：項目的第一行文字的基線對齊着降；
提示：對齊方式與交叉軸的方向有關(guān)，假設(shè)交叉軸從下到上蓄喇。
stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto公罕，將占滿整個容器的高度楼眷。效果如下：
flex-start：起點對齊罐柳；效果如下：
flex-end：終點對齊齿梁；效果如下：
center：中點對齊勺择；效果如下：
baseline：項目的第一行文字的基線對齊省核；效果如下：
-
align-content屬性：定義多根軸線的對齊方式
align-content屬性：定義多根軸線的對齊方式。如果項目只有一根軸線旧噪，該屬性不起作用脓匿。所以亦镶，容器必須設(shè)置flex-wrap：···缤骨；绊起。即必須設(shè)置換行樣式后，該屬性才有意義栅表。該屬性可取值如下：flex-start 怪瓶、flex-end 践美、center 陨倡、 space-between 兴革、 space-around 、 stretch;
flex-start：與交叉軸的起點對齊；
flex-end：與交叉軸的終點對齊硝全；
center：與交叉軸的中點對齊教沾；
space-between：與交叉軸的兩端對齊蟹地，軸線之間的間隔平均分布怪与；
space-around：每根軸線兩側(cè)的間隔相等分别，即軸線之間的間隔比軸線與邊框的間隔大一倍存淫；
stretch（默認值）：軸線占滿整個交叉軸桅咆。
stretch（默認值）：軸線占滿整個交叉軸。效果如下：
flex-start：與交叉軸的起點對齊；效果如下：
flex-end：與交叉軸的終點對齊梯澜；效果如下：
center：與交叉軸的中點對齊；效果如下：
space-between：與交叉軸的兩端對齊撬腾，軸線之間的間隔平均分布民傻；效果如下：
space-around：每根軸線兩側(cè)的間隔相等漓踢，即軸線之間的間隔比軸線與邊框的間隔大一倍喧半；效果如下：
有意思的是，當(dāng)你不給項目設(shè)置高度但是給容器設(shè)置align-content不為stretch時扁耐，同一軸線上的項目的高度將等于項目中高度最高的項目婉称。
項目item的屬性
設(shè)置在項目上的屬性也有6個王暗。
order屬性：定義項目的排列順序俗壹。
flex-grow屬性：定義項目的放大比例
flex-shrink屬性：定義項目的縮小比例
flex-basis屬性：定義在分配多余空間之前策肝，項目占據(jù)的主軸空間之众。
flex屬性是flex-grow棺禾，flex-shrink和flex-basis的簡寫
align-self屬性：允許單個項目與其他項目有不一樣的對齊方式
下面一一介紹：
-
order屬性膘婶。
形如order:數(shù)值悬襟；定義項目的排列順序脊岳。數(shù)值越小，排列越靠前奶躯，默認為0，可以是負值莫瞬。
-
flex-grow屬性
形如flex-grow: <數(shù)字>;定義項目的放大比例。默認值為0规求，即如果空間有剩余阻肿，也不放大丛塌「傲冢可以是小數(shù)姥敛，按比例占據(jù)剩余空間彤敛。相當(dāng)于設(shè)置權(quán)重墨榄。
若所有項目的flex-grow的數(shù)值都相同袄秩，則等分剩余空間播揪。如下：
若果有一個項目flex-grow為2箱沦，其余都為1谓形，則該項目占據(jù)剩余空間是其余的2倍寒跳。如下：
-
flex-shrink屬性：定義項目的縮小比例
flex-shrink屬性童太，形如flex-shrink: 非負整數(shù);來定義項目的縮小比例书释。默認值都為1爆惧，即如果空間不足將等比例縮小扯再。如果有一個項目的值為0熄阻，其他項目為1饺律，當(dāng)空間不足時复濒，該項目不縮小巧颈。負值對該屬性無效砸泛，容器不應(yīng)該設(shè)置flex-wrap十籍。
如果一個項目設(shè)置flex-shrink為0；而其他項目都為1唇礁，則空間不足時勾栗，該項目不縮小。
如果所有項目都為0盏筐，則當(dāng)空間不足時围俘，項目撐破容器而溢出。
如果設(shè)置項目的flex-shrink不為0的非負數(shù)效果同設(shè)置為1界牡。
-
flex-basis屬性：定義在分配多余空間之前，項目占據(jù)的主軸空間漾抬。
flex-basis屬性：定義在分配多余空間之前宿亡，項目占據(jù)的主軸空間。默認值為auto纳令，瀏覽器根據(jù)此屬性檢查主軸是否有多余空間挽荠。
注意：設(shè)置的flex-basis是分配多余空間之前項目占據(jù)的主軸空間，如果空間不足則默認情況下該項目也會縮小平绩。
空間不足坤按，項目縮小，小于設(shè)定值：
-
flex屬性是flex-grow馒过，flex-shrink和flex-basis的簡寫
flex屬性是flex-grow，flex-shrink和flex-basis的簡寫酗钞。默認值為0 1 auto腹忽，第一個屬性必須来累，后兩個屬性可選。
可以用flex:auto;代替 flex: 1 1 auto窘奏；
可以用flex: none;代替 flex: 0 0 auto嘹锁；
-
align-self屬性：允許單個項目與其他項目有不一樣的對齊方式
align-self屬性：允許單個項目與其他項目有不一樣的對齊方式。默認值為auto着裹，表示繼承父元素的align-items屬性领猾，并可以覆蓋align-items屬性。
小結(jié)
本文全面剖析彈性盒子的各個屬性的值骇扇。熟練掌握對于前端布局會有非常大的幫助摔竿。
