1.聲明Flex容器
父容器display:flex； 此時(shí)子容器的塊狀元素消失變成inline-block ，成為flex項(xiàng)目
flex-container ?和flex-items
2.Flex容器的屬性
flex-direction ：row ? || row-reverse ||center ||column ||column-reverse
讓你決定Flex項(xiàng)目如何排列疚沐。它可以是行（水平）灭红、列（垂直）或者行和列的反向(使項(xiàng)目整體排列)
flex-direction: row-reverse;
flex-direction:?row;
flex-direction:?column;?/*豎直排列*/
flex-direction:?column-reverse;/*反向豎直排列*/
flex-wrap 當(dāng)項(xiàng)目充滿(mǎn)容器是否換行
wrap 換行（默認(rèn)）
nowrap 不換行
flex-flow：flex-direction flex-wrap的簡(jiǎn)寫(xiě)
justify-content :flex-start||flex-end||center||space-between||space-around
每個(gè)項(xiàng)目水平排列的樣式
justify-content: flex-end; /*右邊對(duì)齊*/
justify-content:?flex-start;?/*左邊對(duì)齊*/
justify-content:?center;?/*居中對(duì)齊*/
justify-content:?space-between;?/*兩端對(duì)齊?讓除了第一個(gè)和最一個(gè)Flex項(xiàng)目的兩者間間距相同（兩端對(duì)齊）*/
justify-content:?space-around;?/*讓每個(gè)Flex項(xiàng)目具有相同的空間朝卒。*/
align-items：flex-start||flex-end||center||stretch||baseline
每個(gè)項(xiàng)目豎直排列的樣式
align-items: flex-end; /*底部*/
align-items: flex-start; /*頂部*/
align-items: center; /*中間*/
align-items: baseline;
height: 500px; /*使用align-items時(shí)注意給容器加上高度*/
align-content：和align-items相似
3.flex項(xiàng)目的屬性
order || flex-grow || flex-shrink ||flex-basis ||align-self
order：顯示的順序數(shù)值越大越往后面顯示
li:first-child{
order: 1;
}
li:nth-child(2){
order: 2;
}
flex-grow 控制有多余空間變大
0 代表關(guān) ??
? 1 ? 開(kāi)
flex-shrink 控制沒(méi)有多余空間縮小
0 代表關(guān)
1 ? 開(kāi)
有兩個(gè)彈性項(xiàng)目。一個(gè)的 flex-grow 屬性值是 1义桂，另一個(gè)是 2，那么會(huì)出現(xiàn)啥情況呢蹈垢？
兩個(gè)項(xiàng)目上的伸展開(kāi)關(guān)都打開(kāi)了慷吊。不過(guò)，伸展度是不同的曹抬，1?和?2溉瓶。
二者都會(huì)填滿(mǎn)可用空間，不過(guò)是按比例的沐祷。
它是這樣工作的：前一個(gè)占?1/3?的可用空間嚷闭，后一個(gè)占?2/3?的可用空間。
flex: 1 1 auto; /*能伸能縮*/
flex:?1?0?auto;?/*能伸不能縮*/
flex:?0?0?auto;?/*不能伸不能縮??固定寬度*/
flex:?0?1?auto;?/*不能伸能縮*/
flex: 1 1 auto 根據(jù)內(nèi)容決定大小
flex: 1 1 0? 相同寬度
當(dāng)在Flex項(xiàng)目上使用 margin: auto 時(shí)赖临，值為 auto 的方向（左胞锰、右或者二者都是）會(huì)占據(jù)所有剩余空間
align-self:/*和align-iteams相似只是這個(gè)對(duì)于單個(gè)項(xiàng)目*/
