一起从头学习Flex
前言
“其實(shí)我覺(jué)得flex很像現(xiàn)在的人——是適應(yīng)性很好的生物，在家秋衣秋褲在外香肩外露。flex container看作一個(gè)環(huán)境或者大佬，flex-item是其中個(gè)體或者馬仔。個(gè)體如何存在很大程度上取決環(huán)境的設(shè)定，當(dāng)然也會(huì)有一些出世的人 比如position: absolute; 存在感就有比較酷” —— 燉燉
背景：布局模式
頁(yè)面拆開(kāi)了看，無(wú)非是由眾多尺寸各異的box以不同層疊水平和順序組合而成。
CSS2.1定義了下面前4種布局模式，不同的布局模式下box內(nèi)的渲染規(guī)則不同。
| block layout | 塊級(jí)布局 | 獨(dú)立的渲染區(qū)域，與外界無(wú)關(guān) |
| inline layout | 行內(nèi)布局 | 為布局文本設(shè)計(jì) |
| table layout | 表格布局 | 在表格格子布局二維數(shù)據(jù) |
| positioned layout | 定位布局 | 不考慮文件流中其他元素，布局有非常明確的位置 |
| flex layout | 彈性布局 | 呈現(xiàn)復(fù)雜的應(yīng)用與頁(yè)面 |
flex-layout和block-layout非常相似。
塊級(jí)布局中一些比較復(fù)雜的屬性，比如浮動(dòng)、多列，在彈性布局中是沒(méi)有的；
反過(guò)來(lái)彈性布局有一些很簡(jiǎn)單但厲害的屬性去實(shí)現(xiàn)復(fù)雜的網(wǎng)頁(yè)布局中常見(jiàn)的需求。
flex-container檔案
被接受程度：所有的瀏覽器都支持flexbox（caniuse）
如何成為大佬 flex：display:flex/inline-flex; 分別產(chǎn)生塊級(jí)和行內(nèi)的彈性容器。
flexbox
速記幾個(gè)屬性：
flex-flow 子元素排列的方向和是否換行 flex-flow: [<flex-direction> <flex-wrap>]
flex-direction 排列方向和順序（主軸側(cè)軸方向決定）
flex-direction: row | row-reverse | column | column-reverse
flex-wrap 主軸個(gè)數(shù)和排列順序
flex-wrap: nowrap | wrap | wrap-reverse
eg. flex-flow: row || column wrap || row-reverse wrap-reverse
justify-content 安排（決定）子元素在主軸上如何分配空白空間的方式
justify-content: flex-start | flex-end | center | space-between | space-around
align-items 安排（決定）子元素在縱軸上的伸展方式
align-items: flex-start | flex-end | center | baseline | stretch
align-content 多條主軸如何在縱軸方向上面排布，跟justify-content 在主軸方向?qū)R元素的方式相似，如果只有一行該屬性不生效
align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex-items檔案
- 不參與flex布局，脫離文檔流 （戳）
- align-self: auto/stretch = align:flex-start 默認(rèn)布局從主軸開(kāi)始位置放置
- align-self: center 垂直方向居中(chrome遵守了這一規(guī)范，IE/FF沒(méi)有，戳)
幾個(gè)重要屬性：
margins 和 paddings：flex item的margins不會(huì)重疊（應(yīng)該盡量避免使用百分比的margins、paddings，在不同瀏覽器下表現(xiàn)不一樣，目前在IE/FF/Chrome還沒(méi)有測(cè)試出來(lái)差別啦） 百分比的基準(zhǔn)是瀏覽器寬度
有order的元素渲染順序會(huì)重置，相當(dāng)于指定特定的子元素出現(xiàn)在什么位置
visibility: collapse 看例子
flex 子元素的彈性
flex: [ <flex-grow> <flex-shrink> <flex-basis>] 詳見(jiàn)flex縮寫(xiě)探究
margin: auto 會(huì)“貪吃”掉所有空白的區(qū)域 例子
align-self 單獨(dú)設(shè)置子元素（包括絕對(duì)定位的子元素）在縱軸上的定位方式，可以覆蓋align-items屬性
align-self: auto | flex-start | flex-end | center | baseline | stretch （auto是跟container的flex-items屬性一致）
flex縮寫(xiě)的探究
flex: [ <flex-grow> <flex-shrink> <flex-basis>]
- flex-grow 默認(rèn)1 如何分配container中的空白空間，數(shù)值決定權(quán)重
- flex-shrink 默認(rèn)1 在空間不夠的時(shí)候如何收縮元素
- flex-basis 指定flex-item的默認(rèn)尺寸 百分比以父級(jí)容器寬度為基數(shù)計(jì)算（Flexbox Tester可以幫助理解flex item寬度的工具網(wǎng)站）
| no declaration | 0 | 1 | auto |
| auto | 1 | 1 | auto |
| 0 | 0 | 1 | 0% |
| 1 | 1 | 1 | 0% |
| none | 0 | 0 | auto |
彈性布局不是塊級(jí)布局
為什么你的flexbox不管用
"了解一個(gè)人并不代表什么，人是會(huì)變的"——《重慶森林》。
放在W3C規(guī)范和瀏覽器實(shí)現(xiàn)就是“了解一個(gè)屬性并不代表什么，瀏覽器實(shí)現(xiàn)都是有差異的”。
W3C只是制定了規(guī)范，但是遵守程度和實(shí)現(xiàn)效果各個(gè)瀏覽器是有所差異的。當(dāng)你清楚你想實(shí)現(xiàn)什么效果而使用了對(duì)應(yīng)的屬性卻發(fā)現(xiàn)不起作用，那么很可能是瀏覽器的差異造成的。比如上面提到的flex縮寫(xiě)，IE10的實(shí)現(xiàn)是不符合規(guī)范的
| (no flex declaration) | flex: 0 1 auto | flex: 0 0 auto |
| flex: 1 | flex: 1 1 0% | flex: 1 0 0px |
| flex: auto | flex: 1 1 auto | flex: 1 0 auto |
| flex: initial | flex: 0 1 auto | flex: 0 0 auto |
另外一個(gè)可能不常見(jiàn)但也能體現(xiàn)瀏覽器差異的是，嵌套的彈性容器的baseline不作為其他彈性子元素的對(duì)齊參考（可以在Firefox戳例子看看）。
“當(dāng)你在構(gòu)建頁(yè)面的時(shí)候使用了flexbox但是發(fā)現(xiàn)他并沒(méi)有出現(xiàn)你預(yù)想的效果，可以在這里找到答案”——flexbugs
關(guān)于flex.css
flex.css就是對(duì)flex布局的一種封裝，通過(guò)簡(jiǎn)潔的屬性設(shè)置就能使得它完美的運(yùn)行在移動(dòng)端的各種瀏覽器，甚至能運(yùn)行在ie10+的各種PC端瀏覽器中。是一種類(lèi)似于標(biāo)簽屬性聲明的方式，指定flex屬性。
<!-- 設(shè)置主軸方向 --> <div class="flexbox" flex="dir: top"> ... </div>復(fù)制代碼| dir: top | flex-direction: cloumn |
| main: center | justify-content: center |
| cross: top | align-items: flex-start |
試驗(yàn)flex布局的工具網(wǎng)站： flexbox playground and code generator
參考
by DDun
總結(jié)
以上是生活随笔為你收集整理的一起从头学习Flex的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： WebP图片格式，压缩提高28%
- 下一篇： 第二次作业——个人项目实战