簡介
1 .1維布局，一個flex一次只能處理一個維度上的元素布局身隐，一行或者一列。
2 .如果不規(guī)定換行唯灵，就算是超了贾铝，會等比壓縮縮小，而不是自動換行埠帕，想要換行必須要使用felx-wrap
3 .任何一個容器都可以被指定為flex布局
4 .行內(nèi)元素可以被指定為inline-flex
5 .設(shè)置flex之后垢揩，子元素的float,clear，vertical-align
flex子項(xiàng)
1 .在flex布局中敛瓷，一個Flex子項(xiàng)的寬度是由元素自身尺寸即flex-basic設(shè)置的基礎(chǔ)屬性叁巨，以及外部填充flex-grow,收縮flex-shrink，還有最大琐驴，最小尺寸限制這5個共同決定的
2 .基礎(chǔ)尺寸：flex-basic,box-sizing盒模型共同決定
3 .彈性增長;flex-grow屬性俘种，彈性收縮秤标；flex-shirk屬性
4 .最小尺寸min-wdith,max-width等css屬性，min-content最小內(nèi)容尺寸,width也屬于最小尺寸了
5 .在flex布局中宙刘，子項(xiàng)設(shè)置width是沒有直接效果的.實(shí)際設(shè)置的width苍姜，雖然看起來生效了，但是效果是flex-basic的作用
6 .flex-basic的默認(rèn)值是auto悬包，也就是完全根據(jù)子列表項(xiàng)自身尺寸渲染(min-width>||max-width>width>content-size)
1 .flex-basci對width的操作就是覆蓋衙猪。如果同時設(shè)置了這倆值。width直接不生效
2 .自身尺寸只要和下面這幾個方面有關(guān)布近。box-sizing盒模型垫释，width.min-width,max-width.content內(nèi)容
7 .是盒模型，元素自身尺寸特性撑瞧，以及flex屬性共同作用的結(jié)果棵譬。
計算優(yōu)先級
最大最小尺寸限制>彈性收縮，彈性擴(kuò)張>基礎(chǔ)尺寸
1 .所以無論是什么布局min-width,max-width這種屬性都擁有絕對權(quán)威
一個flex其實(shí)是這三個屬性的集合预伺，以后還是都分開寫吧
flex只有一個值
1 .如果是數(shù)值订咸，比如flex:1。chrome里面是flex-basis:0%,flex-grow:1,flex-shirk:1.
1 .實(shí)際表現(xiàn)酬诀，沒有寬度脏嚷，所以所有的元素都將擠在一個里面，就算是設(shè)置了換行也不知道瞒御，蠢的一批
2 .如果是長度值父叙，比如flex:100px。還是chrome肴裙，flex-basis:100px,flex-grow:1,flex-shirk:1趾唱。
1 .這樣的表現(xiàn)就是如果一行可以放5個，總共有7個践宴，那么第一行是5個鲸匿，長度是100px.第二行的的3個長度就是160px;
其他
1 .2個參數(shù)，3個參數(shù)阻肩，以及initial,auto,none這些關(guān)鍵字，沒有記的必要运授，直接分開寫的清清楚楚不就好了烤惊，非要用一些自己不是很明白的參數(shù)在那里瞎搞
2 .flex默認(rèn)值 0 1 auto 。也就是不放大吁朦，等比縮小柒室，用原來的大小
flex-basis
1 .分配固定的家產(chǎn)數(shù)量
2 .如果同時設(shè)置width，會被忽略逗宜，但是max-width雄右，min-width空骚，優(yōu)先級比flex-basis更高。但是最高不要用這個值擂仍，也就是使用寬度直接使用flex-basis就可以囤屹，不需要單獨(dú)給子項(xiàng)固定width，這樣會讓人很疑惑逢渔。甚至根本不需要min-width/max-width這些屬性
3 .flex-basic是作用在content-box上的.設(shè)置的width+padding+border
肋坚。如果給他設(shè)置box-sizing:border-box:那么寬度會減小，減小的長度是padding-left+padding-right+border*2的長度
4 .flex-basis:支持一堆關(guān)鍵字肃廓，但是好多都不支持
flex-grow
1 .家產(chǎn)任然后賦予的時候在怎么分智厌。默認(rèn)是0.多余空間不分配
flex-shrink
1 .家產(chǎn)剩余不夠分的時候怎么分。默認(rèn)是1盲赊，空間不足會分配
結(jié)果
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-around;
width: 500px;
height: 500px;
}
.d1{
flex-basis:100px;
flex-grow: 0;
/* 不會去爭奪多余的財產(chǎn) */
flex-shrink: 2;
/* 不夠的時候需要拿的時候铣鹏，拿的數(shù)量是被人的兩倍 */
/* 這也就是說最大寬度是100px,最小寬度還不確定 */
}
.d2,.d3{
flex-basis: 100px;
flex-grow: 0;
flex-shrink: 1;
}
.d4{
flex-basis: 50px;
flex-grow: 3;
/* 多余的時候要拿3份，不足的時候不給 */
/* 這也就是最小寬度是20px */
flex-shrink: 0;
}
.d5{
flex-basis:50px;
flex-grow: 2;
flex-shrink: 0;
}
1 .每一個item固定大小100px哀蘑。只有flex-basis：100诚卸，其余兩屬性沒有，但是寬度不足递礼，又沒有換行的時候惨险，寬度不夠，所有都是會一起縮小的脊髓，并不是最小寬度辫愉，這是因?yàn)閒lex-shirk:默認(rèn)是1.所以屬性一定還是設(shè)置的
.container div{
flex-basis:100px;
background-color: aquamarine;
}
//但是如果每一個item加了min-width之后，總寬度不夠會超出顯示的将硝，這種如果不想恭朗，需要加overflow:hidden
2 .每一個item最小寬度是100，多余寬度等擴(kuò)大依疼，但是要有間距.因?yàn)闀缺葦U(kuò)大痰腮，所以間距要自己設(shè)置，這里可以設(shè)置padding律罢。還有一個重要的就是background-color的計算和bos-sizing沒有關(guān)系膀值。所以這里加padding沒啥用，背景顏色還是在原來的范圍內(nèi)顯示误辑，只是content-box會變化沧踏。所以這里要加margin,但是marginzhe這里也有一個坑點(diǎn)，flex布局下不會自動margin折疊巾钉，所以不能簡單的margin：10翘狱，這樣各個item的間距不一樣
.content div:nth-child(5n){
//這樣可以選到每一排第5個，但是這樣必須是一排是5個才可以砰苍，不然就需要動態(tài)換潦匈，所以最后還是加父元素的padding吧阱高，補(bǔ)足那不夠的一半.是一個元素和最后一個元素沒有兄弟元素的這些
}
父元素屬性
1 .flex-direction:決定主軸的方向
從左到右非別是
1 .column-reverse:豎向從下到上
2 .column:豎向從上到下
3 .row：橫向從左到右。注意這個是默認(rèn)值
4 .row-reverse:橫向從右到左茬缩。
2 .flex-wrap:默認(rèn)情況下赤惊，所有項(xiàng)目都是排在一條線上，就算是超了寒屯，默認(rèn)情況下都是按照1:1縮小荐捻，而不是機(jī)靈的自動換行，必須使用這個屬性才會自動換
1 .nowrap:不換行寡夹，默認(rèn)值
2 .wrap:換行处面，頂滿的那一行在上面
3 .wrap-reverse：訂滿的那一行在下面。這個應(yīng)該沒人用吧菩掏，看著就就很畢加索
3 .flex-flow:上面那倆屬性的合并值魂角。
4 .justify-content:主軸上項(xiàng)目的對齊方式。如果是橫向主軸智绸，那么是左右的對齊方式野揪，如果是豎向主軸，那么就是上下的對齊方式
1 .flex-start:左對齊瞧栗。默認(rèn)值斯稳。其實(shí)如果都是左對齊，我們可以用margin來模擬項(xiàng)目的間距的
2 .flex-end：右對齊
3 .center:居中
4 .space-around:兩邊的距離是中間距離的一半迹恐。只有中間的是平均分布的
5 .space-between:左右兩側(cè)貼邊挣惰，其余均勻分布
6 .space-evenly:所有的間隔都是相等的。如圖.有兼容性問題
5 .align-items:交叉軸上的對齊方式殴边，也就是上下對齊方式.具體的對齊方式和交叉軸有關(guān)系
1 .flex-start：交叉軸的起點(diǎn)對齊憎茂。
2 .flex-end:交叉軸的終點(diǎn)對齊
3 .center:交叉軸的終點(diǎn)對齊
4 .baseline:項(xiàng)目的第一行文字的基線對齊
5 .stretch:默認(rèn)值。如果項(xiàng)目未設(shè)置高度或者為auto锤岸，會自動占滿整個容器的高度
6 .align-content屬性：多跟軸線的對齊方式,如果項(xiàng)目只有一根軸線竖幔，這個屬性
不起作用
1 .flex-start：多條軸和交叉軸的起點(diǎn)對齊
2 .flex-end:與交叉軸的終點(diǎn)對齊
3 .center:與交叉軸的中點(diǎn)對齊
4 .space-between:與交叉軸兩端對齊，軸線之間的間隔平均分布
5 .space-around:每個軸線兩側(cè)的間隔都相等是偷。軸線之間的間隔
項(xiàng)目的屬性
1 .order：本來列表是按照實(shí)際的渲染順序來顯示的拳氢，如果單獨(dú)給某個屬性設(shè)置這個值，數(shù)字越小蛋铆，排列越靠前饿幅。
2 .flex-grow
3 .flex-shrink
4 .flex-basis
5 align-self:重點(diǎn)。覆蓋align-items屬性戒职，允許單個項(xiàng)目和其他有不一樣的對齊方式.會覆蓋align-items屬性。
1 .flex-start
2 .flex-end
3 .center
4 .baseline
5 .stretch
