一禾乘、起步
1乱陡、flex介紹
使用flex彈性布局的元素，稱為flex 容器（flex-container）熊昌。它的所有子元素自動(dòng)成為容器成員绽榛，稱為 flex 項(xiàng)目（flex-item）。
即需要分為兩個(gè)部分婿屹，一為flex-container灭美，另一部分為flex-item，flex-item包含于flex-container中昂利，如下面代碼中冲粤，類名為“container”的div塊為flex-container，div中所包含的類名為“item1”页眯、“item2”、“item3”的div塊均為flex-item厢呵。
注意：設(shè)為 flex布局以后窝撵，子元素的float、clear和vertical-align屬性將失效襟铭。
<div class="container">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>
.container {
width: 500px;
height: 400px;
background-color: orange;
margin: 0 auto;
}
.item {
width: 100px;
height: 100px;
color: #fff;
line-height: 100px;
text-align: center;
}
.item1 {
background-color: #f00;
}
.item2 {
background-color: #0f0;
}
.item3 {
background-color: #00f;
}
二碌奉、flex主軸概念
（1）彈性布局開啟后flex-container元素默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。
（2）主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start寒砖，結(jié)束位置叫做main end赐劣；
（3）交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end哩都。
（4）flex-item元素默認(rèn)沿主軸排列魁兼。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size漠嵌。
二咐汞、開啟flex布局
對flex-container以及其中的flex-item開啟flex布局，需在flex-container做如下設(shè)置：
.container{
width: 500px;
height: 400px;
background-color: orange;
margin: 0 auto;
display:flex || inline-flex;
// 開啟flex布局儒鹿，當(dāng)display為flex化撕，此容器為塊級元素，當(dāng)為inline-flex時(shí)為行內(nèi)元素
//Webkit 內(nèi)核的瀏覽器约炎，必須加上-webkit前綴植阴，即-webkit-flex蟹瘾。
}
//其他item屬性暫時(shí)不變
<div class="container">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>
<span>我是行內(nèi)元素</span>
分布如下圖所示：
三、flex-container屬性
flex-container可設(shè)置如下6種屬性：
（1）flex-direction：控制主軸放方向掠手，默認(rèn)屬性為row
（2）justify-content：決定了flex-item與main axis上的對齊方式
（3）align-items：決定了flex-item與cross axis上的對齊方式
（4）flex-wrap：決定了flex container是單行和多行
（5）flex-flow為flex-direction和flex-wrap的縮寫屬性
（6）align-content決定了多行flex-item與cross axis上的對齊方式憾朴，用法與justify-content相似
1渤昌、flex-direction有如下4個(gè)選項(xiàng)：
（1）row：flex-direction控制主軸方向沟涨，默認(rèn)屬性為row。
（2）row-revers：翻轉(zhuǎn)主軸方向断凶。
（3）column：主軸方向改為豎直方向魁衙。
（4）column-reverse：翻轉(zhuǎn)此時(shí)的主軸方向报腔。
.container {
flex-direction:row || row-reverse|| column || column-reverse || column-reverse;
// flex-direction：控制主軸方向，默認(rèn)屬性為row
// row-revers：翻轉(zhuǎn)主軸方向
// column：主軸方向改為豎直方向
// column-reverse：翻轉(zhuǎn)此時(shí)的主軸方向
}
示例如下：
2剖淀、justify-content：決定了flex-item與main axis上的對齊方式
（1）flex-start（默認(rèn)值）：與main start對齊
（2）flex-end：與main end對齊
（3）center：居中對齊
（4）space-between： flex-item之間距離相等纯蛾，與main start main end兩端對齊
（5）space-around： flex-item之間距離相等，flex-item與main start纵隔、main end之間的距離等于flex-item之間的距離
（6）space-evenly： flex-item之間距離相等翻诉，flex-item與main start、main end之間的距離是flex-item之間的距離的一半
.container {
justify-content: flex-start || flex-end || center || space-between || space-around
// flex-start（默認(rèn)值）：與main start對齊
// flex-end：與main end對齊
// center：居中對齊
// space-between： flex-item之間距離相等捌刮，與main start碰煌、main end兩端對齊
// space-around： flex-item之間距離相等，flex-item與main start绅作、main end之間的距離等于flex-item之間的距離
// space-evenly： flex-item之間距離相等芦圾，flex-item與main start、main end之間的距離是flex-item之間的距離的一半
}
示例如下：
3俄认、align-items：決定了flex-item與cross axis上的對齊方式
（1）normal:與stretch效果一樣
（2）stretch：當(dāng)flex-item在cross axi放下的size為auto時(shí)个少，會(huì)自動(dòng)拉伸填充至flex container
（3）flex-start（默認(rèn)值）：items在cross start對齊
（4）flex-end：在cross end對齊
（5）center：居住對齊
（6）baseline：基準(zhǔn)線對齊
.container {
align-items: normal || stretch || flex-start || flex-end || center || baseline
// normal: 與stretch效果一樣
// stretch：當(dāng)flex-item在cross axi放下的size為auto時(shí)，會(huì)自動(dòng)拉伸填充至flex container
// flex-start（默認(rèn)值）：items在cross start對齊
// flex-end：在cross end對齊
// center：居住對齊
// baseline：基準(zhǔn)線對齊
}
示例如下：
4眯杏、flex-wrap：決定了flex container是單行和多行
（1）nowrap（默認(rèn)值）：單行
（2）wrap：多行夜焦，當(dāng)?shù)谝恍凶詈笫５木嚯x占不下時(shí)，會(huì)按cross方向等分的flex container部分對齊分配第二行
（3）wrap-reverse：多行（對比wrap岂贩，cross start與cross end相反）
.container {
flex-wrap: nowrap || wrap || wrap-reverse
// nowrap（默認(rèn)值）：單行
// wrap：多行茫经，當(dāng)?shù)谝恍凶詈笫５木嚯x占不下時(shí)，會(huì)按cross方向等分的flex container部分對齊分配第二行
// wrap-reverse：多行（對比wrap河闰，cross start與cross end相反）
}
5科平、flex-flow：為flex-direction和flex-wrap的縮寫屬性
例如：
.container {
flex-flow：column wrap
}
6、align-content：決定了多行flex-item與cross axis上的對齊方式姜性，用法與justify-content相似
（1）stretch（默認(rèn)值）：與align-items的stretch效果一樣
（2）flex-start：與cross start對齊
（3）flex-start：與cross end對齊
（4）center居住對齊
（5）space-between： flex-item之間距離相等瞪慧，與cross start、cross end兩端對齊
（6）space-around： flex-item之間距離相等部念，flex-item與cross start弃酌、cross end之間的距離等于flex-item之間的距離
（7）space-evenly： flex-item之間距離相等氨菇，flex-item與cross start、cross end之間的距離是flex-item之間的距離的一半
.container {
align-content：stretch || flex-start || flex-end || center || space-between || space-around || space-evenly
// stretch（默認(rèn)值）：與align-items的stretch效果一樣
//flex-start：與cross start對齊
//flex-end：與cross end對齊
//center居住對齊
//space-between： flex-item之間距離相等妓湘，與cross start查蓉、cross end兩端對齊
//space-around： flex-item之間距離相等，flex-item與cross start榜贴、cross end之間的距離等于flex-item之間的距離
//space-evenly： flex-item之間距離相等豌研，flex-item與cross start、cross end之間的距離是flex-item之間的距離的一半
}
示例如下：
四唬党、flex-item中的屬性
flex-item共用6個(gè)設(shè)置屬性鹃共，如下所示：
（1）order：定義項(xiàng)目的排列順序。數(shù)值越小驶拱，排列越靠前霜浴，默認(rèn)為0 。
（2）align-self：覆蓋flex:-container設(shè)置的align-items蓝纲。
（3）flex-grow：決定了flex-item放大比例阴孟，默認(rèn)為0，即如果存在剩余空間税迷，也不放大永丝。
（4）flex-shrink決定了flex-item縮小比例，默認(rèn)為1箭养，即如果空間不足类溢，該項(xiàng)目將縮小。
（5）flex-basis屬性定義了在分配多余空間之前露懒，flex-item占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性砂心，計(jì)算主軸是否有多余空間懈词。它的默認(rèn)值為auto，即flex-item的本來大小辩诞。
（6）flex是flex-grow || flex-shrink || flex-basis的簡寫坎弯，flex屬性可以指定1個(gè)，2個(gè)译暂，3個(gè)值抠忘。
1、order：定義項(xiàng)目的排列順序
（1）可以設(shè)置任意整數(shù)（正整數(shù)外永、負(fù)整數(shù)崎脉、0），值越小越排在前面
（2）默認(rèn)值是0
示例如下：
2伯顶、align-self：覆蓋flex-container設(shè)置的align-items囚灼。
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式骆膝，可覆蓋align-items屬性。默認(rèn)值為auto灶体，表示繼承父元素的align-items屬性阅签，如果沒有父元素，則等同于stretch蝎抽。
示例：
3政钟、flex-grow：可以設(shè)置任意非負(fù)數(shù)字（正小數(shù)、正整數(shù)樟结、0）养交，默認(rèn)值是0
（1）當(dāng)flex-container在main axis有剩余size時(shí)才會(huì)生效
（2） 如果所有flex-item的flex-grow總和sum超過1，每個(gè)flex-item擴(kuò)展的size為：flex-container的剩余size * flex-grow/sum
（3）如果所有flex-item的flex-grow總和sum不超過1狭吼，每個(gè)flex-item擴(kuò)展的size為：flex-container的剩余size * flex-grow
（4）flex-item擴(kuò)展后的所有size不能超過max-width
示例:
4层坠、flex-shrink可：以設(shè)置任意非負(fù)數(shù)字（正小數(shù)、正整數(shù)刁笙、0）破花，默認(rèn)值是1
（1）當(dāng)flex-item 在main axis上超過flex-container的size時(shí)才會(huì)生效
（2）如果所有flex-item的flex-shrink總和sum超過1，每個(gè)flex-item收縮的size為：flex-item超出flex-container的size * （收縮比例 / 所有flex-item收縮比例之和）
（3）如果所有flex-item的flex-shrink總和sum不超過1疲吸，每個(gè)flex-item收縮的size為：每個(gè)flex-item收縮的size為：flex-item超出flex-container的size * 所有flex-item收縮比例之和 * （收縮比例/所有flex-item收縮比例之和）
i. 收縮比例=flex-shrink * flex-item的base-size
ii. base-size就是flex-item放入flex-container之前的size
iii. flex items收縮后的所有size不能小于min-width
示例：
5座每、flex-basis：用來設(shè)置flex-item在main axis方向上的size，
（1）設(shè)置為auto為默認(rèn)值摘悴，即為原來的大小峭梳、
（2）設(shè)置具體的寬度數(shù)值（100px)，即可改變flex-item的size
決定flex-item最終size的因素蹂喻，從優(yōu)先級高到底
i.max-width/max-height/min-width/min-height
ii.flex-basis
iii.width/height
iiii.內(nèi)容本身的size
6葱椭、flex：是flex-grow || flex-shrink || flex-basis的簡寫，flex屬性可以指定1個(gè)口四，2個(gè)孵运，3個(gè)值
（1）單值語法：值必須為以下其中之一：
一個(gè)無單位數(shù)（<number>):它會(huì)被當(dāng)做flex-grow的值
一個(gè)有效的寬度（width）值：它會(huì)被當(dāng)做flex-basis的值
關(guān)鍵字none，auto活initial
（2）雙值語法：第一個(gè)值必須為一個(gè)無單位數(shù)蔓彩，并且會(huì)被當(dāng)做flex-grow的值
第二個(gè)值必須為以下之一：
一個(gè)無單位數(shù)：它會(huì)被當(dāng)做flex-shrink的值
一個(gè)有效的寬度值：它會(huì)被當(dāng)做flex-basis的值
（3）三值語法：
第一個(gè)值必須為無單位數(shù)治笨，并且會(huì)被當(dāng)做flex-grow的值
第二個(gè)值必須為無單位數(shù)，并且會(huì)被當(dāng)做flex-shrink的值
第二個(gè)值必須為一個(gè)有效的寬度值數(shù)赤嚼，并且會(huì)被當(dāng)做flex-basis的值
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)旷赖。
建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫三個(gè)分離的屬性更卒，因?yàn)闉g覽器會(huì)推算相關(guān)值
常用的示例：
