flex布局目前基本上兼容主流的瀏覽器，且實(shí)現(xiàn)方式簡單输玷。小H整理了flex的一些知識(shí)點(diǎn)，并且總結(jié)歸納了幾種常見布局的flex寫法
?flex基礎(chǔ)知識(shí)點(diǎn)
flex-grow和flex-shrink相關(guān)計(jì)算公式
- 公式1：子元素空間 < 父容器
父容器剩余空間 = 父容器寬度 - 子元素寬度之和
增長單位 = 父容器剩余空間 / 各子元素flex-grow之和
子元素實(shí)際寬度 = (flex-basis) + 增長單位*(flex-grow)
- 公式2：子元素空間 > 父容器
子元素溢出的寬度 = 子元素的寬度之和 - 子元素寬度之和
收縮單位 = 子元素溢出的寬度 / 各子元素flex_shrink之和
計(jì)算的子元素的寬度 = (flex-basis) - 收縮單位*(flex-shrink)
flex兼容性
目前flex兼容主流瀏覽器靡馁，對(duì)于部分兼容的瀏覽器可加私有屬性：
display:-ms-flex;/* IE10 */
display:-moz-flex;/* Firefox2 ~ Firefox21 */
display:-webkit-flex;
flex bugs
- 在IE10~11瀏覽器,min-height不適合于flex容器的子元素flex項(xiàng)目欲鹏。如果可能的話，使用height來替代min-height臭墨。
- 在Chrome赔嚎，Opear和Safari瀏覽器不識(shí)別flex項(xiàng)目內(nèi)容的最小尺寸。可以設(shè)置flex-shrink的值為0（而不是默認(rèn)的1）尤误，以避免不必要的收縮侠畔。
- 不使用無單位的flex-basis值，因?yàn)樵贗E10~11中损晤，flex簡寫被忽略软棺。常使用0%來替代0px。
flex布局應(yīng)用場景
Flexbox布局比較適合Web應(yīng)用程序的一些小組件和小規(guī)模的布局尤勋，而Grid布局更適合用于一些大規(guī)模的布局喘落。
flex布局優(yōu)缺點(diǎn)
- 兼容所有主流瀏覽器
- 輕松實(shí)現(xiàn)元素的水平垂直居中
- 可以忽略內(nèi)聯(lián)元素的4px外邊距
- 可以簡單的實(shí)現(xiàn)復(fù)雜的布局
推薦閱讀
- 大漠：《一個(gè)完整的Flexbox指南》
- 阮一峰：《Flex 布局教程》
- Philip Walton和Greg Whitworth收集和整理了有關(guān)于Flexbox bugs。
幾種常見布局的flex寫法
首先要對(duì)父元素設(shè)置flex布局方式最冰，同時(shí)在本案例中瘦棋，利用媒體查詢，當(dāng)屏幕分辨率小于768px的時(shí)候锌奴，flex布局變成縱向排列兽狭。
- 兩列布局
flex-grow定義的是元素的放大比例，默認(rèn)值為0鹿蜀，表示元素不放大。當(dāng)給所有子元素賦予flex-grow的值時(shí)服球，該值可以看作是元素尺寸所占父元素的比例茴恰。
- 兩列布局定寬
flex是flex-grow flex-shrink flex-basis的簡寫方式。
給第一個(gè)子元素賦值flex：1 0 100px;表示該元素在任何情況下的寬度均是固定位100px斩熊，不會(huì)隨著父元素和其他子元素縮放往枣。
第二個(gè)子元素的flex-grow為1，則在任何情況下該元素均占滿父元素的剩余空間粉渠，設(shè)置overflow可以防止元素溢出分冈。
- 三列布局
該布局中重點(diǎn)介紹的是order屬性，元素的先后排列順序與order的值對(duì)應(yīng)霸株，order值越大雕沉，元素越靠后。
- n列等比布局
注意到第6個(gè)子元素的特殊性去件，我們希望這六個(gè)子元素能等寬分布坡椒，但是當(dāng)元素內(nèi)容過多時(shí)，它會(huì)占用更多的空間尤溜，甚至溢出倔叼。
因此對(duì)這些元素定義了width:100%;該方法表示所有的元素均占用父元素應(yīng)有的位置，不因其他兄弟元素內(nèi)容過多而少分配空間宫莱。
- 流式布局
流式布局可適用于自適應(yīng)布局中丈攒，當(dāng)父元素大小發(fā)生改變時(shí)，其子元素的大小也隨之改變。
該布局的重點(diǎn)屬性是flex-wrap:wrap;巡验，如此設(shè)置可以使子元素自動(dòng)換行际插，防止子元素溢出。
- 水平垂直居中
關(guān)鍵屬性為justify-content:center;align-item:center;這是flex布局的一個(gè)兩點(diǎn)深碱，不需要知道父腹鹉、子元素任何相關(guān)的尺寸信息，便能實(shí)現(xiàn)居中布局敷硅，靈活性很大功咒。
- 對(duì)折線
該案例以及下面的“各種對(duì)齊方法”主要是介紹flex中，水平和垂直方向上的的各種對(duì)齊方式绞蹦。
-
各類對(duì)齊方式
pic26.png
