2016年10月騰訊公開課flex11號(hào)筆記和

1、教你使用flex布局flex是什么歷史版本2009年第1次草案：display:box;2011年第2次草案：display:flexbox | inline-flexbox;2012年第5次草案及以后的候選推薦標(biāo)準(zhǔn)：display:flex | inline-flex;工作草案（Working Draft）最終公示（Last Call）候選推薦標(biāo)準(zhǔn)（Candidate mendation）提名推薦標(biāo)準(zhǔn)（Proposed mendation）推薦標(biāo)準(zhǔn)（ mendation）作用CSS3中定義的一種新的布局模式?？刂圃谌萜鲀?nèi)的子元素的對(duì)齊方式、排列方式以及排序順序調(diào)整其子元素的寬度或者高度以使其

2、能在不同分辨率的屏幕下能用最好的方式去填充可用空間。問題元素自適應(yīng)水平垂直居中？基本概念容器項(xiàng)目項(xiàng)目項(xiàng)目主軸交叉軸主軸大小交叉軸大小容器container的屬性1-3flex-direction取值：row | row-reverse | column | column-reverse功能：決定的項(xiàng)目排列方向（主軸方向）。flex-wrap取值：nowrap | wrap | wrap-reverse功能：控制容器中的項(xiàng)目的換行。flex-flow功能：簡化代碼。是flex-direction與flex-wrap的合寫。 flex-flow: flex-direction flex-wrap容

3、器container的屬性4-64.justify-content ： 取值：flex-start | flex-end | center | space-between | space-around 功能：容器內(nèi)的項(xiàng)目在按主軸方向上進(jìn)行排列，這個(gè)屬性決定了項(xiàng)目與項(xiàng)目之間的位置關(guān)系。5.align-items 取值：stretch | flex-start | flex-end | center | baseline 作用：項(xiàng)目在交叉軸（與主軸垂直的軸）方向上的擺放位置。6.align-content 取值：stretch | flex-start | flex-end | space-bet

4、ween | space-around 功能：當(dāng)容器中有多行項(xiàng)目（當(dāng)然，前提是允許換行）時(shí)，每一行項(xiàng)目就會(huì)產(chǎn)生一根主軸，多行項(xiàng)目就會(huì)產(chǎn)生多個(gè)主軸。這個(gè)屬性決定這多根主軸之間的位置關(guān)系。項(xiàng)目item的屬性11.order取值：數(shù)值功能：容器中有多個(gè)項(xiàng)目，項(xiàng)目的默認(rèn)擺放是沿主軸方向，按文檔中dom元素的書寫順序進(jìn)行排列的。order屬性用于更改排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0?？梢詾樨?fù)數(shù)。項(xiàng)目item的屬性22. flex-grow 取值：數(shù)值 功能：放大因子。使用前提：主軸方向上有多余的空間可以讓項(xiàng)目去“伸展”。 計(jì)算步驟： （1）統(tǒng)計(jì)多余的空間：M=容器的寬度-所有項(xiàng)目寬度之和 （2）

5、確定均分的份數(shù)：N=項(xiàng)目flex-grow的值之和 （3）計(jì)算單位空間P=M/N。 （4）項(xiàng)目放大后的寬度：R=寬度+P*當(dāng)前flex-grow值項(xiàng)目item的屬性33. flex-shrink rk 取值：數(shù)值 功能：縮小因子。使用前提：主軸方向上的空間不夠，項(xiàng)目被壓縮。 計(jì)算步驟： （1）總差值，即需要被壓縮的大小：M=容器的寬度-項(xiàng)目的寬度之和 （2）加權(quán)和：N =flex-shrink*項(xiàng)目寬度值之和 （3）縮小后的寬度 = 項(xiàng)目值 - 項(xiàng)目值 * flex-shrink /N * M。項(xiàng)目item的屬性4-64.flex-basis bess 項(xiàng)目在主軸上占據(jù)的大小。默認(rèn)為auto(主軸是水平方向時(shí)就是寬度，主軸是垂直方向時(shí)：默認(rèn)為height值。5.flex flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。 該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。6.align-self 取值：auto | flex-start | flex-end | center | baseline | stretch 屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋容器的align-