flex布局全解析

1、flex布局全解析很長(zhǎng)一段時(shí)間, 我知道有flex這個(gè)布局方式, 但是始終沒(méi)有去學(xué)它. 3點(diǎn)原因:1. 感覺(jué)還比較新, 擔(dān)心兼容性不好.2. 普通的布局方式能滿足我的絕大多數(shù)需求.3. 好像蠻復(fù)雜的.最近由于開發(fā)需要, 學(xué)習(xí)了下WeUI的實(shí)現(xiàn), 發(fā)現(xiàn)里面大量使用了flex布局, 于是決定學(xué)習(xí)一下.什么是flexFlexbox Layout, 官方名為CSS Flexible Box Layout Module, 意為"彈性布局", 是CSS3中引入的一種更加靈活高效的布局/對(duì)齊/排序方式(還有一種更適合大型布局的網(wǎng)格布局CSS Grid Layout Module

2、). flex是flexible的縮寫.任何一個(gè)容器都可以指定為flex布局。.box display: flex;行內(nèi)元素也可以使用flex布局。.box display: inline-flex;flex的基本概念采用flex布局的元素被稱為flex容器 (flex container), 它的子元素即為flex元素 (flex item).flex容器中包含兩個(gè)相互垂直的軸, 即主軸 (main axis)和副軸 (cross axis).flex元素沿主軸從主軸起點(diǎn) (main start)到主軸終點(diǎn) (main end)依次排布.如果flex容器包含多行flex元素, 則f

3、lex行 (flex lines)沿副軸從副軸起點(diǎn) (cross start)到副軸終點(diǎn) (cross end)依次排布.單個(gè)flex元素占據(jù)的主軸空間叫做主軸長(zhǎng)度 (main size), 占據(jù)的副軸空間叫做副軸長(zhǎng)度 (cross size).flex的兼容性Getting Dicey With Flexbox中提到:There's a popular myth floating around that flexbox isn't ready for prime time. Wrong! 93% of people are now running a browser

4、 that supports flexbox. That's better than the support for the HTML5 <video>element.前一段時(shí)間同事做過(guò)video相關(guān)的開發(fā), 踩到各種坑, 因此我知道video的支持不那么好, 特別是在Android上. 讓我驚奇的是flex竟然比video的支持更好?從CanIUse的數(shù)據(jù)來(lái)看, flex的支持度是: 82.65% (支持) + 14.17% (部分支持) = 96.81%, 而video的支持度是: 92.48%. 瀏覽器對(duì)flex的支持

5、好像并沒(méi)有特別好.但是有微信的WeUI使用了flex布局, 我覺(jué)得在移動(dòng)端flex應(yīng)該還是支持度比較高的.所以, 如果你是做移動(dòng)端開發(fā)的, 可以優(yōu)先考慮flex.flex屬性下面就開始介紹與flex布局相關(guān)的屬性. 以作用對(duì)象分為兩組, 第一組作用于flex容器, 第二組作用于flex元素.注意: 以下屬性值都可以有initial(該屬性的默認(rèn)值)和inherit(繼承自父元素), 本處省略.用于flex容器的屬性這類屬性有6種, 分別為:屬性含義flex-direction主軸方向flex-wrap換行樣式flex-flow前兩個(gè)的簡(jiǎn)寫形式j(luò)ustify-content主軸對(duì)齊方式

6、align-items單行的副軸對(duì)齊方式align-content多行的副軸對(duì)齊方式注意:· flex容器的column-*屬性會(huì)失效.· flex容器無(wú)法擁有:first-line和:first-letter虛元素.flex-direction含義主軸方向可選值row | row-reverse | column | column-reverse默認(rèn)值rowrowdirection為ltr時(shí)從左向右, rtl時(shí)從右向左.row-reversedirection為ltr時(shí)從右向左, rtl時(shí)從左向右.column從上到下.column-reverse從下

7、到上.注意: row和row-reverse受到了direction屬性(默認(rèn)值為ltr, 可改為rtl)的影響.flex-wrap含義換行樣式可選值nowrap | wrap | wrap-reverse默認(rèn)值nowrapnowrap不換行wrap換行. 行與行從上到下排布wrap-reverse換行. 行與行從下到上排布flex-flow含義flex-direction和flex-wrap的簡(jiǎn)寫形式可選值flex-direction flex-wrap默認(rèn)值row nowrapjustify-content含義主軸對(duì)齊方式可選值flex-start | flex-end | ce

8、nter | space-between | space-around默認(rèn)值flex-startalign-items含義單行的副軸對(duì)齊方式可選值flex-start | flex-end | center | stretch | baseline默認(rèn)值stretchalign-content含義多行的副軸對(duì)齊方式可選值stretch | flex-start | center | flex-end | space-between | space-around默認(rèn)值stretch注意: 此屬性只在flex容器中有多行flex元素時(shí)才有作用.用于flex元素的屬性這類屬性有6種, 分別

9、為:屬性含義order排列順序align-selfflex元素的副軸對(duì)齊方式. 對(duì)應(yīng)于flex容器的align-items.flex-grow放大比例flex-shrink縮小比例flex-basis初始大小flex上面三個(gè)的簡(jiǎn)寫形式注意: flex元素的float, clear和vertical-align會(huì)失效.order含義排列順序. 沿著主軸, flex元素按order的增序排列.可選值<integer>默認(rèn)值0align-self含義flex元素的副軸對(duì)齊方式. 對(duì)應(yīng)于flex容器的align-items.可選值auto | stretch | cen

10、ter | flex-start | flex-end | baseline默認(rèn)值auto當(dāng)flex元素有父元素時(shí), 它的align-self: auto即為父元素的align-items屬性; 否則(無(wú)父元素時(shí)), 相當(dāng)于stretch.flex-grow含義放大比例可選值<number> (非負(fù)值)默認(rèn)值0當(dāng)有剩余空間時(shí), flex元素會(huì)根據(jù)flex-grow按比例分配剩余空間.默認(rèn)值0代表, 即使有剩余空間, 該flex元素也不放大.flex-shrink含義縮小比例可選值<number> (非負(fù)值)默認(rèn)值1當(dāng)flex容器空間不足時(shí), flex

11、元素會(huì)根據(jù)flex-shrink按比例縮小.flex-shrink為0則表示, 即使flex容器空間不足, 該flex元素也不縮小.flex-basis含義初始大小可選值auto|<length> (非負(fù)值)默認(rèn)值autoflex-basis定義了分配剩余空間之前flex元素的初始大小, 可為長(zhǎng)度值(如20%, 5rem等)或auto等關(guān)鍵詞.flex-basis: auto表示, 以flex元素的主軸長(zhǎng)度為flex-basis. 若flex元素的主軸長(zhǎng)度也是auto, 則以flex元素內(nèi)容(即所有子元素)的大小為flex-basis.除了auto還有conte

12、nt, max-content, min-content和fit-content關(guān)鍵詞, 但是現(xiàn)在瀏覽器對(duì)它們的支持太少, 可以忽略.flex含義flex-grow, flex-shrink和flex-basis的簡(jiǎn)寫形式可選值none | <flex-grow> <flex-shrink>? | <flex-basis> 默認(rèn)值0 1 auto(敲黑板) 同學(xué)們注意, 這里是重點(diǎn)!這里的可選值我參照了W3C flexbox的寫法. 其中:· |用來(lái)分割兩個(gè)或多個(gè)選項(xiàng), 從中選取一個(gè)或多個(gè), 不限次序.· |

13、用來(lái)分割兩個(gè)或多個(gè)選項(xiàng), 從中選取一個(gè).· 只是用來(lái)分組的.· ?代表可選.舉例來(lái)說(shuō), a | b | c 包含的可能情況有a, b, c, b c, c b.現(xiàn)在回過(guò)頭來(lái)再看none | <flex-grow> <flex-shrink>? | <flex-basis> 就清晰多了.注意, none是一個(gè)特殊值, 相當(dāng)于0 0 auto.另外, 如果flex中不指定:· flex-grow成員, 則flex-grow會(huì)被置為1.· flex-shrink成員

14、, 則flex-shrink會(huì)被置為1.· flex-basis成員, 則flex-basis會(huì)被置為0.注意: flex的初始值是0 1 auto, 即由每個(gè)flex因子本身的默認(rèn)值組成(比方說(shuō)flex-grow的默認(rèn)值就是0).但是, 如果利用flex設(shè)置了至少一個(gè)flex因子, 那么沒(méi)被設(shè)置的那些flex因子的默認(rèn)值(按grow, shrink, basis的順序)分別是1 1 0.我來(lái)舉幾個(gè)栗子./* 特殊值none */flex: none; /* 相當(dāng)于0 0 auto */* 單值，沒(méi)有單位的數(shù)字，是flex-grow */flex: 2; /* 相當(dāng)于 fl

15、ex: 2 1 0 */* 單值，有單位的，寬、高，是flex-basis */flex: 10em; /* 相當(dāng)于 flex: 1 1 10em */flex: 30px; /* 相當(dāng)于 flex: 1 1 30px */flex: auto; /* 相當(dāng)于 flex: 1 1 auto */flex: content; /* 相當(dāng)于 flex: 1 1 content */* 兩個(gè)值：flex-grow flex-basis */flex: 1 30px; /* 相當(dāng)于 flex: 1 1 30px */* 兩個(gè)值：flex-grow flex-shrink */flex: 2 2; /*

16、 相當(dāng)于 flex: 2 2 0 */* 三個(gè)值：flex-grow flex-shrink flex-basis */flex: 2 2 10%;W3C建議使用簡(jiǎn)寫形式flex, 因?yàn)樗梢苑奖愕貞?yīng)對(duì)下面4種常見情況.flex: initial即flex: 0 1 auto. 以auto方式計(jì)算flex-basis, 不可放大, 可縮小.flex: auto即flex: 1 1 auto. 以auto方式計(jì)算flex-basis, 可放大, 可縮小.flex: none即flex: 0 0 auto. 以auto方式計(jì)算-basis, 不可放大, 不可縮小.fl

17、ex: <positive-number>即<positive-number> 1 0. flex-basis為0, 以<positive-number>比例增大, 以1的比例縮小.flex元素大小的計(jì)算方法自此, 我們已經(jīng)知道了flex-grow, flex-shrink和flex-basis的作用. 根據(jù)這三個(gè)值, 計(jì)算flex元素的大小只需三步:第一步: 計(jì)算元素的flex-basis, 有兩種情況: 1. 具體的長(zhǎng)度值, 或, 2.auto(即flex元素的大小). (這里忽略了content等目前支持還不完善的關(guān)鍵詞)

18、.第二步: 計(jì)算剩余空間, 即剩余空間 = flex容器的內(nèi)部空間 - flex元素flex-basis值的總和.第三步: 按照f(shuō)lex因子(放大時(shí)為flex-grow; 縮小時(shí)為flex-shrink)分配剩余空間到每個(gè)元素. flex元素的最終大小 = flex-basis - flex-factor * 剩余空間.舉個(gè)栗子.假設(shè)flex容器的內(nèi)部空間為200px, flex元素的大小的總和是160px. 看起來(lái), 還有200 - 160 = 40px的剩余空間, 應(yīng)該放大flex元素, 是不是? 不一定! 要看它們的flex-basis總和.假設(shè)它們的flex-basis總和是300px, 那么剩余空間應(yīng)該是300 - 200 = -100px. 此時(shí)剩余空間是負(fù)數(shù), 應(yīng)該以flex-shrink對(duì)每個(gè)flex元素在flex-basis的基礎(chǔ)上進(jìn)行縮小.下例中, 所有flex元素本身的大小為80px, 元素中為flex值.200px0 1 auto0 3 auto0 1 150px0 3 150px125px75px你可以看到, 第一行的flex元素因?yàn)樵O(shè)置了