一、介紹Flex布局
????什么是Flex布局呢？Flex布局：又稱彈性布局，它是Flexible Box 的縮寫，它為盒狀模型提供最大的靈活性。
二、Flex布局的概念
flex? container：Flex容器（簡稱“容器”），即采用Flex布局的元素。
flex? item：Flex項(xiàng)目（簡稱“項(xiàng)目”），即容器的所有子元素自動(dòng)成為容器成員。
mian? axis：水平的主軸。cross? axis：垂直的交叉軸。它們是容器（flex? container）默認(rèn)存在的兩根軸。
main? start：主軸的開始位置（與邊框的交叉點(diǎn)）。main? end：主軸的結(jié)束位置（與邊框的交叉點(diǎn)）。
cross? start：交叉軸的開始位置。cross? end：交叉軸的結(jié)束位置。
mian? size：單個(gè)項(xiàng)目占據(jù)的主軸空間。cross? size：單個(gè)項(xiàng)目占據(jù)的交叉軸空間。項(xiàng)目默認(rèn)延主軸排列。
三、Flex? container（容器）的屬性
Flex? container有6個(gè)屬性，即 flex-direction、flex-wrap、justify-content、align-items、align-content、flex-flow。
1.flex-direction的屬性
flex-direction：決定主軸的方向，即項(xiàng)目的排列方向
flex-direction：row | row-reverse | column | column-reverse
①?flex-direction：row
row：默認(rèn)值。主軸是水平方向，起點(diǎn)在最左邊（即11）
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{??
?????????background:#ecbebe;?
?????????height: 100px;?
? ???????width: 100px;?
????????margin:10px;}?
（項(xiàng)目排列）：
.box1{??
????????display: flex;
????????width:100%;?
????????flex-direction: row;
}??
②?flex-direction：row-reverse
row-reverse：主軸是水平方向，起點(diǎn)在最右邊（即11）
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
? ????????background:#ecbebe;
? ??????? ?height: 100px;
? ??????? ?width: 100px;
? ? ? ? ? ?margin:10px; }
（項(xiàng)目排列）：
.box2{
????????display: flex;
????????width:100%;
????????flex-direction: row-reverse;
}?
③?flex-direction：column
row-reverse：主軸是垂直方向，起點(diǎn)在最上（即11）
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（項(xiàng)目排列）：
.box3{
????????display: flex;
????????width:100%;
????????flex-direction:?column;
}?
④?flex-direction：column-reverse
column-reverse：主軸是垂直方向，起點(diǎn)在最下（即11）
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（項(xiàng)目排列）：
.box4{
????????display: flex;
????????width:100%;
????????flex-direction:?column-reverse;
}?
2.flex-wrap的屬性
flex-wrap：默認(rèn)下，項(xiàng)目都排在軸線上。（定義：一條軸線排不下，如何換行）
flex-wrap：nowrap | wrap | wrap-reverse
①?flex-wrap：nowrap
nowrap：默認(rèn)值。起點(diǎn)在最左邊（即11）
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（不換行）：
.box5{
????????display: flex;
????????width:100%;
????????flex-wrap: nowrap;
}?
② flex-wrap：wrap
wrap：起點(diǎn)在最左邊（即11）
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}?
（換行，第一行在上方）：
.box6{
????????display: flex;
????????width:100%;
????????flex-wrap: wrap;
}?
③ flex-wrap：wrap-reverse
wrap-reverse：起點(diǎn)在最左邊（即11）
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5 ,.div6{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（換行，第一行在下方）：
.box7{
????????display: flex;
????????width:100%;
????????flex-wrap:?wrap-reverse;
}?
3.justify-content的屬性
justify-content：定義了項(xiàng)目在主軸上的對齊方式
justify-content：flex-start | flex-end | center | space-between | space-around
①?justify-content：flex-start
flex-start：默認(rèn)值。左對齊
css代碼：
.div-box{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（對齊方式）：
.box8{
????????display: flex;
????????width:100%;
????????justify-content: flex-start;
}?
② justify-content：flex-end
flex-end：右對齊
css代碼：
.div-box{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（對齊方式）：
.box9{
????????display: flex;
????????width:100%;
????????justify-content: flex-end;
}?
③?justify-content：center
center：居中
css代碼：
.div-box{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（對齊方式）：
.box10{
????????display: flex;
????????width:100%;
????????justify-content:?center;
}?
④ justify-content：space-between
space-between：兩端對齊，項(xiàng)目之間的間隔都相等
css代碼：
.div-box{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
（對齊方式）：
.box11{
????????display: flex;
????????width:100%;
????????justify-content:?space-between;
}?
⑤?justify-content：space-around
space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等，即項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍
css代碼：
.div-box{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}?
（對齊方式）：
.box12{
????????display: flex;
????????width:100%;
????????justify-content:?space-around;
}?
4.align-items的屬性
align-items：定義了項(xiàng)目在交叉軸上的對齊方式
align-items：flex-start | flex-end | center | baseline | stretch
①?align-items：flex-start
flex-start：交叉軸的起點(diǎn)對齊
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}
.div2{
? ? ? ?height: 300px;
}
.div4{
? ? ? ?height: 50px;
}?
（對齊方式）：
.box13{
????????display: flex;
????????width:100%;
???????align-items: flex-start;
}?
② align-items：flex-end
flex-end：交叉軸的終點(diǎn)對齊
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}?
.div2{
? ? ? ?height: 300px;
}
.div4{
? ? ? ?height: 50px;
}
（對齊方式）：
.box14{
????????display: flex;
????????width:100%;
???????align-items: flex-end;
}?
③ align-items：center
center：交叉軸的中點(diǎn)對齊
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;?
}
.div2{
? ? ? ?height: 300px;
}
.div4{
? ? ? ?height: 50px;
}
（對齊方式）：
.box15{
????????display: flex;
????????width:100%;
????????align-items:?center;
}?
④ align-items：baseline
baseline：項(xiàng)目的第一行文字的基線對齊
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????background:#ecbebe;
????????height: 100px;
????????width: 100px;
????????margin:10px;
}?
.div2{
???????height: 300px;
}
.div4{
????????height: 50px;
}?
（對齊方式）：
.box16{
????????display: flex;
????????width:100%;
????????align-items:?baseline;
}?
⑤ align-items：stretch
stretch：默認(rèn)值。如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度
css代碼：
#box17{
? ? width: 300px;
? ? height: 278px;
? ? border: 1px solid black;
? ? display:flex;
? ? align-items:stretch;
}
#box17 div{
? flex:1;
}
.div1{
? background-color:#eadd79;
}
.div2{
? background-color:#79e5ea;
}
.div3{
? background-color:#79ea8c;
}
5.align-content的屬性
align-content：定義了項(xiàng)目在主軸上的對齊方式
align-content：flex-start | flex-end | center | space-between | space-around | stretch
①?align-content：stretch
stretch：默認(rèn)值。軸線占滿整個(gè)交叉軸
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3{
????????height:30px;
????????width:100px;
}
.div1{
????????background-color:#eadd79;
}
.div2{
????????background-color:#79e5ea;
}
.div3{
????????background-color:#79ea8c;
}
（對齊方式）：
.box18{
????????background-color:#ecbebe;
????????height:200px;
????????width:200px;
????????display:flex;
????????flex-direction:row;
????????flex-wrap:wrap;
????????align-content:stretch;
}
② align-content：center
center：與交叉軸的中點(diǎn)對齊
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????height:30px;
????????width:100px;
}
.div1{
????????background-color:#eadd79;
}
.div2{
????????background-color:#79e5ea;
}
.div3{
????????background-color:#79ea8c;
}
.div4{
????????background-color:#9ad1b2;
}
.div5{?
????????background-color:rgb(10,154,101);
}
（對齊方式）：
.box19{
????????background-color:#ecbebe;
????????height:200px;
????????width:200px;
????????display:flex;
????????flex-direction:row;
????????flex-wrap:wrap;
????????align-content:center;
}
③ align-content：flex-start
flex-start：與交叉軸的起點(diǎn)對齊
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????height:30px;
????????width:100px;
}
.div1{
????????background-color:#eadd79;
}
.div2{
????????background-color:#79e5ea;
}
.div3{
????????background-color:#79ea8c;
}
.div4{
????????background-color:#9ad1b2;
}
.div5{
????????background-color:rgb(10,154,101);
}
（對齊方式）：
.box20{
????????background-color:#ecbebe;
????????height:200px;
????????width:200px;
????????display:flex;
????????flex-direction:row;
????????flex-wrap:wrap;
????????align-content:flex-start;
}?
③?align-content：flex-end
flex-end：與交叉軸的終點(diǎn)對齊
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????height:30px;
????????width:100px;
}
.div1{
????????background-color:#eadd79;
}
.div2{
????????background-color:#79e5ea;
}
.div3{
????????background-color:#79ea8c;?
}
.div4{
????????background-color:#9ad1b2;
}
.div5{
????????background-color:rgb(10,154,101);
}
（對齊方式）：
.box21{
????????background-color:#ecbebe;
????????height:200px;
????????width:200px;
????????display:flex;
????????flex-direction:row;
????????flex-wrap:wrap;
????????align-content:flex-end;
}?
④ align-content：space-between
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????height:30px;
????????width:100px;
}
.div1{
????????background-color:#eadd79;
}
.div2{
????????background-color:#79e5ea;
}
.div3{
????????background-color:#79ea8c;
}
.div4{
????????background-color:#9ad1b2;
}
.div5{
????????background-color:rgb(10,154,101);
}?
（對齊方式）：
.box22{
????????background-color:#ecbebe;
????????height:200px;
????????width:200px;
????????display:flex;
????????flex-direction:row;
????????flex-wrap:wrap;
????????align-content:space-between;
}
⑤ align-content：space-around
space-around：每根軸線兩側(cè)的間隔都相等，即項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍
css代碼：
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
????????height:30px;
????????width:100px;
}
.div1{
????????background-color:#eadd79;
}
.div2{
????????background-color:#79e5ea;
}
.div3{
????????background-color:#79ea8c;
}
.div4{
????????background-color:#9ad1b2;
}
.div5{
????????background-color:rgb(10,154,101);
}
（對齊方式）：
.box23{
????????background-color:#ecbebe;
????????height:200px;
????????width:200px;
????????display:flex;
????????flex-direction:row;
????????flex-wrap:wrap;
????????align-content:space-around;
}?
6.flex-flow的屬性
flex-flow：flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap
（因?yàn)槲覀兞?xí)慣于單獨(dú)使用flex-direction、flex-wrap，而flex-flow卻很少使用到，所以可以將它視為“糟粕”）
flex-flow：<flex-direction> ||<flex-wrap>
只舉兩個(gè)例子說明：
①?flex-flow：column wrap
column wrap：column（主軸為垂直方向，起點(diǎn)在上沿），wrap（換行，第一行在上方）
css代碼：
.box24 {
? ? display: flex;
}
.flex-container.first {
????display: flex;
? ? background: #333;
? ? width: 200px;
? ? height: 200px;
? ? margin: 5px;
? ??flex-flow: column wrap;
}
.item {?
? ? background: #ecbebe;
? ? padding: 5px;
? ? width: 80px;
? ? height: 80px;
? ? margin: 5px;
? ? line-height: 80px;
? ? color: white;
? ? font-weight: bold;
? ? font-size: 2em;
? ? text-align: center;
}?
ul {
? ? padding: 0;
}
li {
? ? list-style: none;
}
② flex-flow：row-reverse wrap-reverse
row-reverse wrap-reverse：row-reverse（主軸為水平方向，起點(diǎn)在右端），row-reverse（換行，第一行在下方）
css代碼：
.box25 {
? ? display: flex;
}
.flex-container.second {
????display: flex;
? ? background: #333;
? ? width: 200px;
? ? height: 200px;
? ? margin: 5px;
? ??flex-flow: row-reverse wrap-reverse;
}
.item {
? ? background: #ecbebe;
? ? padding: 5px;
? ? width: 80px;
? ? height: 80px;
? ? margin: 5px;
? ? line-height: 80px;
? ? color: white;
? ? font-weight: bold;
? ? font-size: 2em;?
? ? text-align: center;
}
ul {
? ? padding: 0;
}
li {
? ? list-style: none;?
}
四、項(xiàng)目（flex item）的屬性
1.flex-grow 的屬性
flex-grow：定義項(xiàng)目（flex-grow）的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大
css代碼：
#box26 {
? width: 700px;
? height: 200px;
? border: 1px;
? display: flex;
}
.blue1 {
? ? background-color:#2ce0e8;
? ? flex-grow: 2;
}
.green1 {
? ? background-color:#00ff66;
? ? flex-grow: 3;
}
.yellow1 {
? ? background-color:#e3fd0e;
? ? flex-grow: 0.5;
}
.pink1 {
? ? background-color:#ecbebe;
? ? flex-grow: 1;
}
.grey1 {
? ? background-color:#cec5c5;
? ? flex-grow: 1;
}
2.order 的屬性
order：定義項(xiàng)目（flex-grow）的排列順序（即數(shù)值越小，排列越靠前，默認(rèn)為0）
（order在布局中基本不會(huì)使用到，不用深入了解，所以可以將它視為“糟粕”）
order:<integer>
css代碼：
#box27 {
? ? width: 400px;
? ? height: 150px;
? ? border: 1px;
? ? display: flex;
}
#box27 div {
? ? width: 100px;
? ? height: 100px;
}
.yellow {
? ? background-color:#e3fd0e;
? ? order: -2;
}?
.blue? {
? ? background-color:#2ce0e8;
? ? order: 5;
}
.green {
? ? background-color:#00ff66;
? ? order: 10;
}
.pink? {
? ? background-color:#ecbebe;
? ? order: 0;
}
3.flex-shrink?的屬性
flex-shrink：定義項(xiàng)目（flex-grow）的項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小
（對于flex-shrink，我個(gè)人認(rèn)為這個(gè)在flex中不常使用，因?yàn)槲覀兌蓟緯?huì)定義每一個(gè)元素的高度和寬度，所以可以將它視為“糟粕”）
flex-shrink:<number>
css代碼：
#box28 {
? display: flex;
? width: 500px;
}
#box28 div {
? flex-basis: 140px;
? border: 1px solid rgba(0,0,0,.1);
}
.boxt{
? flex-shrink: 0;
}
.boxt1 {
? flex-shrink: 1;?
}
4.flex-basis?的屬性
flex-basis：定義在分配多余空間之前，項(xiàng)目（flex-grow）的占的主軸空間（main size），瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間（默認(rèn)值為auto，即項(xiàng)目的本來大小）
（對于flex-basis，在布局中，也不常用，所以可以將它視為“糟粕”）
flex-basis:<length> | auto
css代碼：
#box29 {
? ? width: 350px;
? ? height: 100px;
? ? border: 1px;
? ? display: flex;
}?
.one {
? ? flex-grow: 0;
? ? flex-shrink: 0;
??? flex-basis: 100px;
}
.two {
? ? flex-grow: 0;
? ? flex-shrink: 0;
? ? flex-basis: 150px;
}
.three{
? ? flex-grow: 0;
? ? flex-shrink: 0;
? ? flex-basis: auto;
}
5.flex?的屬性
flex：flex-grow,?flex-shrink?和?flex-basis的簡寫，默認(rèn)值為0 1 auto，后兩個(gè)屬性可選
（因?yàn)槲覀兞?xí)慣于單獨(dú)使用flex-grow、flex-shrink、flex-basis，而flex卻很少使用到，所以可以將它視為“糟粕”）
flex：none | [<flex-grow> <flex-shrink> || <flex-basis> ]
快捷值：auto?(1 1 auto) 和 none (0 0 auto)
① flex:1
css代碼：
#box30 div{
? ? flex:1;
}?
②?flex:auto
css代碼：
#box30 div{
? ? flex:auto;
}?
③?flex:none
css代碼：
#box30 div{
? ? flex:none;
}?
6.align-self??的屬性
align-self?：允許單個(gè)項(xiàng)目（flex item）有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items的屬性（默認(rèn)值為auto，表示繼承父元素的align-items的屬性，如果沒有父元素，則等同于stretch）
align-self:auto | flex-start | flex-end | center | baseline | stretch
css代碼：
#box31 {
? ? width: 1000px;
? ? height: 400px;
? ? border: 1px solid rgba(0,0,0,.2);?
? ? display: flex;
? ??align-items: flex-start;
}
.Red {
? ? background-color:#f32929;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
? ? align-self: flex-start;
}
.Pink {
? ? background-color:#ecbebe;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
}?
.Blue {
? ? background-color:#2ce0e8;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
? ? align-self: center;
}
.Green{
? ? background-color:#00ff66;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
}
.Yellow{
? ? background-color:#e3fd0e;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
? ? align-self: flex-end;
}
.Grey{?
? ? background-color:#cec5c5;
? ? width: 300px;
? ? height: 100px;
? ? flex: 1;
? ? align-self: baseline;
}
.Black{
? ? background-color:#5f4e4e;?
? ? flex: 1;
? ? align-self: stretch;?
}
