一知押、Flex布局與傳統(tǒng)布局
傳統(tǒng)布局依賴于盒模型朗徊，利用display爷恳、position温亲、float屬性來(lái)布局栈虚，但是其對(duì)于某些特殊布局魂务，如垂直居中粘姜，就很不方便。這種情況下利用Flex布局就很方便豺裆。
注：設(shè)置了 Flex 布局以后臭猜，其子元素的float蔑歌、clear和vertical-align屬性將失效丐膝。
二、Flex布局的基本概念
1煞烫、Flex布局
即“彈性布局”滞详，是用來(lái)為盒模型提供最大的靈活性料饥。
2岸啡、flex容器
指設(shè)置flex布局的元素：
.box{
display:flex;
}
Webkit 內(nèi)核的瀏覽器巡蘸，必須加上-webkit前綴:
.box{
display: -webkit-flex;
display:flex;
}
3悦荒、flex項(xiàng)目
指flex容器的所有子元素搬味。
4碰纬、主軸與交叉軸
- 主軸（main axis）：flex容器的水平軸嘀趟；
- 交叉軸（cross axis）：flex容器的垂直軸她按；
- main start酌泰、main end：主軸的開(kāi)始與結(jié)束位置陵刹，主軸與邊框的交叉點(diǎn)衰琐；
- cross start羡宙、cross end：交叉軸的開(kāi)始與結(jié)束位置狗热，交叉軸與邊框的交叉點(diǎn)匿刮；
- main size：?jiǎn)蝹€(gè)項(xiàng)目占據(jù)的主軸空間熟丸；
- cross size：?jiǎn)蝹€(gè)項(xiàng)目占據(jù)的交叉軸空間。
三架馋、Flex布局的屬性
Flex布局的屬性有兩種：設(shè)置在容器上的屬性和設(shè)置在項(xiàng)目上的屬性叉寂。
容器的屬性
容器的屬性有6種：flex-direction屏鳍、flex-wrap钓瞭、flex-flow山涡、justify-content鸭丛、align-items鳞溉、align-content鼠哥。這些屬性均設(shè)置在容器上朴恳。
注：各屬性解析均建立在以下代碼基礎(chǔ)上：
<style>
#flex{
display: flex;
}
#flex1{
background-color: aquamarine;
width: 100px;
height: 100px;
}
#flex2{
background-color: rgb(127, 136, 255);
width: 100px;
height: 100px;
}
#flex3{
background-color: rgb(255, 127, 180);
width: 100px;
height: 100px;
}
</style>
<div id="flex">
<div id="flex1">flex1</div>
<div id="flex2">flex2</div>
<div id="flex3">flex3</div>
</div>
flex-direction屬性：
flex-direction有4個(gè)屬性值：row（默認(rèn)） 于颖、row-reverse恍飘、column章母、column-reverse乳怎；用于決定主軸的方向（即項(xiàng)目的排列方向）蚪缀。
flex-direction: row ;
row.png
flex-direction: row-reverse ;
row-reverse.png
flex-direction: column ;
colum.png
flex-direction: column-reverse ;
column-reverse.png
flex-wrap屬性：
flex-wrap有三個(gè)屬性值： nowrap（默認(rèn)）、wrap刷后、wrap-reverse尝胆；用于規(guī)定一條軸線排不下時(shí)，如何換行贪染。
flex-wrap：nowrap抑进；不換行
nowrap.png
flex-wrap：wrap寺渗；換行信殊，第一行在上方涡拘。
wrap.jpg
flex-wrap：wrap-reverse；換行橱野，第一行在下方水援。
wrap-reverse.jpg
flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式或渤，默認(rèn)值為row nowrap薪鹦。
justify-content屬性
justify-content屬性有5個(gè)屬性值：flex-start （默認(rèn)）距芬、flex-end 框仔、center 离斩、space-between 跛梗、space-around核偿；用于定義項(xiàng)目在主軸上的對(duì)齊方式漾岳。
justify-content：flex-start 尼荆；左對(duì)齊
flex-start.png
justify-content：flex-end ；右對(duì)齊
flex-end.png
justify-content：center 巧还；居中
center.png
justify-content：space-between ；兩端對(duì)齊坊秸，項(xiàng)目之間的間隔都相等
space-between.png
justify-content：space-around狞悲；每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以妇斤，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍
space-around.png
align-items屬性
align-items屬性有5個(gè)屬性值：flex-start 、flex-end 、center 站超、baseline 、stretch死相；用于定義項(xiàng)目在交叉軸上如何對(duì)齊融求。
注：設(shè)置align-items屬性時(shí)，要求容器有高度算撮。
<style>
*{
<!--將h1的外邊距取消生宛，否則會(huì)影響 flex-start 與 flex-end的效果-->
margin:0；
}
#flex{
height: 500px肮柜；<!--為容器設(shè)置高度-->
display: flex;
}
#flex1{
background-color: aquamarine;
width: 100px;
height: 100px;
}
#flex2{
background-color: rgb(127, 136, 255);
width: 100px;
height: 100px;
}
#flex3{
background-color: rgb(255, 127, 180);
width: 100px;
height: 100px;
}
</style>
<div id="flex">
<div id="flex1">flex1</div>
<h1 id="flex2">flex2</h1>
<div id="flex3">flex3</div>
</div>
align-items：flex-start汰扭；各項(xiàng)目于交叉軸的起點(diǎn)對(duì)齊
flex-start.png
align-items：flex-end彼绷；各項(xiàng)目于交叉軸的終點(diǎn)對(duì)齊
flex-end.png
align-items：center；各項(xiàng)目于交叉軸的中點(diǎn)對(duì)齊
center.png
align-items：baseline；各項(xiàng)目的第一行文字的基線對(duì)齊
baseline.png
align-items：stretch歉胶；如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度
為項(xiàng)目設(shè)置高度的情況下：
stretch-有高度.png
- 項(xiàng)目沒(méi)有高度：
<style>
*{
margin: 0;
}
#flex{
height:300px ;
display: flex;
align-items: stretch;
}
#flex1{
background-color: aquamarine;
}
#flex2{
background-color: rgb(127, 136, 255);
}
#flex3{
background-color: rgb(255, 127, 180);
}
</style>
<div id="flex">
<div id="flex1">flex1</div>
<h1 id="flex2">flex2</h1>
<div id="flex3">flex3</div>
</div>
align-content屬性
align-content屬性有6個(gè)屬性值：flex-start 埋合、flex-end 卧须、center、space-between 痴晦、space-around 南吮、stretch（默認(rèn)）；用于定義多根軸線的對(duì)齊方式誊酌。如果項(xiàng)目只有一根軸線部凑，該屬性不起作用。
<style>
*{
margin: 0;
padding: 0;
}
.flex{
width: 240px;
height: 200px;
display: flex;
flex-wrap: wrap;
background-color: #8c8c8c;
}
.flex div{
border: 2px solid #8c8c8c;
width: 50px;
height: 50px;
background-color: #a0c8ff;
}
</style>
<div class="flex">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
align-content：flex-start术辐；與交叉軸的起點(diǎn)對(duì)齊
flex-start.png
align-content：flex-end砚尽；與交叉軸的終點(diǎn)對(duì)齊
flex-end.png
align-content：center；與交叉軸的中點(diǎn)對(duì)齊
center.png
align-content：space-between辉词；與交叉軸兩端對(duì)齊必孤，軸線之間的間隔平均分布
space-between.png
align-content：space-around ；每根軸線兩側(cè)的間隔都相等瑞躺。所以敷搪，軸線之間的間隔比軸線與邊框的間隔大一倍
space-around.png
align-content：stretch；軸線占滿整個(gè)交叉軸
stretch.png
項(xiàng)目的屬性
項(xiàng)目的屬性有6種：order幢哨、flex-grow赡勘、flex-shrink、flex-basis捞镰、flex闸与、align-self毙替。
order屬性
用于定義項(xiàng)目的排列順序。數(shù)值越小践樱，排列越靠前厂画，默認(rèn)為0。
下例中拷邢，原本位于第一二三位的方塊袱院，在更改了其order數(shù)值后，現(xiàn)位于最后三位瞭稼。
<style>
*{
margin: 0;
padding: 0;
}
.flex{
width: 240px;
height: 300px;
display: flex;
flex-wrap: wrap;
background-color: #8c8c8c;
}
.flex div{
border: 2px solid #8c8c8c;
width: 50px;
height: 50px;
background-color: #a0c8ff;
}
#f3,#f2{
order: 1;
}
#f1{
order: 5;
}
</style>
<div class="flex">
<div id="f1">1</div>
<div id="f2">2</div>
<div id="f3">3</div>
<div id="f4">4</div>
<div id="f5">5</div>
<div id="f6">6</div>
</div>
flex-grow屬性
用于定義項(xiàng)目的放大比例忽洛，默認(rèn)為0，即如果存在剩余空間环肘，也不放大欲虚。
下例中，為f1和f5設(shè)置同樣的數(shù)值廷臼，由于其各自所在的主軸剩余的空間不等苍在，因此最終的放大效果不等。所以flex-grow屬性是一種瓜分項(xiàng)目所在主軸（即使剩余空間不足以支撐項(xiàng)目擴(kuò)張相應(yīng)倍數(shù)荠商，也不會(huì)擴(kuò)張到另外的主軸上）的剩余空間的屬性寂恬。
<style>
*{
margin: 0;
padding: 0;
}
.flex{
width: 240px;
height: 300px;
display: flex;
flex-wrap: wrap;
background-color: #8c8c8c;
}
.flex div{
border: 2px solid #8c8c8c;
width: 50px;
height: 50px;
background-color: #a0c8ff;
}
#f1,#f5{
flex-grow: 5;
}
#f3{
flex-grow: 2;
}
</style>
<div class="flex">
<div id="f1">1</div>
<div id="f2">2</div>
<div id="f3">3</div>
<div id="f4">4</div>
<div id="f5">5</div>
<div id="f6">6</div>
</div>
flex-shrink屬性
用于定義項(xiàng)目的縮小比例，默認(rèn)為1莱没。
- 如果所有項(xiàng)目的flex-shrink屬性都為1初肉，當(dāng)空間不足時(shí)，都將等比例縮惺味恪牙咏；
- 如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1嘹裂，則空間不足時(shí)妄壶，前者不縮小。
flex-basis屬性
用于定義在分配多余空間之前寄狼，項(xiàng)目占據(jù)的主軸空間丁寄。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間泊愧。它的默認(rèn)值為auto伊磺，即項(xiàng)目的本來(lái)大小。
它可以設(shè)為跟width或height屬性一樣的值（比如350px）删咱，則項(xiàng)目將占據(jù)固定空間屑埋。
flex屬性
flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto痰滋。后兩個(gè)屬性可選摘能。
align-self屬性
1续崖、允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性团搞。默認(rèn)值為auto袜刷，表示繼承父元素的align-items屬性，如果沒(méi)有父元素莺丑，則等同于stretch。
2墩蔓、align-self屬性有6個(gè)屬性值：auto（默認(rèn)）梢莽、flex-start 、flex-end 奸披、center 昏名、baseline 、stretch阵面。
