CSS3Flexbox布局一次搞懂

1、CSS3 Flexbox布局一次搞懂1. 引言希望可以通過可視化的方式幫助您了解Flexbox屬性如何影響flex布局。2. 正文2.1 引入Flexbox布局官方稱為CSS Flexible Box Layout Module是一個CSS3新的布局模塊，用于實現(xiàn)容器里項目的對齊、方向、排序（即使在項目大小位置、動態(tài)生成的情況）。flex容器最大的特性在于，能夠修改子元素的寬度和高度，以滿足在不同尺寸屏幕下的如意分布。許多設(shè)計人員、開發(fā)人員發(fā)現(xiàn)flexbox布局方式使用簡單，定位元素更加簡單、復(fù)雜的布局更容易用較少的代碼實現(xiàn)，大大地簡化了開發(fā)流程。不像塊狀布局、內(nèi)聯(lián)布局那樣基于豎直方向、水平方

2、向，flexbox的布局算法基于方向。flexbox布局適用于小的應(yīng)用組件、新的CSS Grid布局模塊更適用于大量的布局。本指南不解釋flex屬性如何工作，我們只是用可視化的方式展示flex屬性如何影響布局。2.2 基礎(chǔ)在具體描述flex屬性之前，我們先來簡要介紹下flexbox模型。flex布局由父容器（我們叫做flex container）和它的子元素（我們叫做flex items）組成。在上圖所示的盒子里，你可以看到用來描述flex container和flex items的屬性和術(shù)語，如果你想了解詳細(xì)信息，請訪問W3C的flexbox model官方文檔.flexbox自2009的初

3、次草案開始，已經(jīng)經(jīng)歷了幾次更新和語法修改，為了避免困惑、保證清晰，我們僅僅使用2014年9月最后一次工作草案中的語法。如果您想要實現(xiàn)舊瀏覽器的兼容，請訪問這篇文章尋找最佳實踐。最近的flexbox規(guī)范瀏覽器支持情況如下：Chrome 29+Firefox 28+Internet Explorer 11+Opera 17+Safari 6.1+ (prefixed with -webkit-)Android 4.4+iOS 7.1+ (prefixed with -webkit-)您也可以到caniuse了解瀏覽器兼容情況詳情。本文中的用到的一些術(shù)語的表達(dá)約定如下.flex-container-

4、彈性容器.flex-item-彈性子元素.main axis-主軸.cross axis-側(cè)軸.2.3 使用使用flexbox只需要在父元素上設(shè)置display屬性即可。如果您想讓它以內(nèi)聯(lián)方式顯示，則注意：僅僅需要在父元素上設(shè)置這一個屬性即可，它的子元素會自動變成flex items。有很多方式分組flexbox的所有屬性，我發(fā)現(xiàn)最容易理解的方式是分成兩組，一組為彈性容器的屬性，另一組為彈性子元素的屬性，接下來我們按這種方式來一一解析。2.4 彈性容器（Flex container）屬性2.4.1 flex-direction該屬性通過設(shè)置flex container主坐標(biāo)軸方向影響子元素(f

5、lex item)如何在容器中排布。我們可以設(shè)置兩個主要的方向水平和垂直方向。可以接受的值有四個row、row-reverse、column、column-reverse，如下所示。彈性子元素將會按照自左向右的水平排列。彈性子元素將會自右向左水平排列。彈性子元素將自上而下豎直排列彈性子元素將自下而上豎直排列默認(rèn)值為row.2.4.2 flex-wrapflexbox最初的理念是保持彈性容器的子元素在一行中。flex-wrap屬性控制當(dāng)子元素items超出彈性容器范圍是是否換行，以及新行的方向。本屬性可以接受一下幾個值：no-wrap、wrap、wrap-reverse，分別如下所示。彈性子元素

6、將會在一行顯示，默認(rèn)的子元素items將會縮減以適應(yīng)彈性容器的寬度。如果需要的話，彈性子元素將會自左向右、自上而下地多行顯示。如果需要的話，彈性子元素將會自左向右、自下而上地多行顯示。默認(rèn)值為no-wrap.2.4.3 flex-flowflex-flow屬性是flex-direction和flex-wrap屬性的快捷方式，復(fù)合屬性。默認(rèn)值為row nowrap.2.4.4 justify-contentjustify-content設(shè)置彈性子元素在彈性容器中當(dāng)前行主坐標(biāo)的對齊方式，當(dāng)彈性容器里一行上的所有子元素都不能伸縮或已經(jīng)達(dá)到其最大值時，該屬性可協(xié)助對多余的空間進(jìn)行分配?？梢越邮艿闹禐閒

7、lex-start、flex-end、center、space-between、space-around等五個值，默認(rèn)值為flex-start。詳細(xì)如下所示。彈性子元素flex items將會彈性容器中居中對齊。彈性子元素flex items中的第一個、最后一個對齊彈性容器的邊緣，其余均勻分布。彈性子元素flex items中的任何一個都參與均勻分布，即使是第一個和最后一個。2.4.5 align-itemsalign-items設(shè)置彈性子元素在彈性容器中當(dāng)前行側(cè)軸上的對齊方式，跟justify-content類似但是作用于側(cè)軸（flex-direction為row和row-reverse時為

8、縱軸，flex為column和column-reverse時為橫軸）。該屬性設(shè)置所有flex items(包含匿名的item)的默認(rèn)對齊方式。可以接受的值為flex-start、flex-end、center、baseline、stretch等五個值，默認(rèn)值為stretch。詳細(xì)如下所示。彈性子元素將會從側(cè)軸開始到側(cè)軸結(jié)束鋪滿整個高度（寬度）。彈性子元素將會堆棧在彈性容器的側(cè)軸開始位置。彈性子元素將會堆棧在彈性容器的側(cè)軸結(jié)束位置。彈性子元素將會堆棧在彈性容器的側(cè)軸中間位置。彈性子元素將會以文字基線的方式對齊。2.4.6 align-content當(dāng)彈性容器側(cè)軸中有空白時，align-conte

9、nt屬性設(shè)置伸縮行的對齊方式，正如justify-content在主軸上設(shè)置對齊方式一樣。可以接受的值為：stretch、flex-start、flex-end、center、space-between、space-around等, 默認(rèn)值為stretch。各行平分剩余空間。各行堆棧緊靠側(cè)軸起始邊界。各行堆棧緊靠側(cè)軸結(jié)束邊界。各行堆棧位于側(cè)軸居中位置。各行之間空白均勻分布，第一行和最后一行緊靠側(cè)軸邊緣。各行在彈性盒子中均勻分布，兩端保留子元素與子元素之間間距大小的一半。注意該屬性只作用于彈性容器里擁有多行的情況，如果只有單行該屬性無效。另外。上面所說的“行”指的是主軸方向的平行的數(shù)據(jù)，例如fl

10、ex-direction值為row、row-reverse時指數(shù)據(jù)行，值為column、column-reverse時指數(shù)據(jù)列。2.4.7 注意事項所有的column-屬性對彈性容器無效:first-line和:first-letter偽對象對彈性容器無效2.5 彈性子元素（Flex item）屬性2.5.1 orderorder屬性控制彈性容器里子元素的順序，默認(rèn)情況下按照彈性容器里添加的順序排列。可以接受的值為整型數(shù)字，默認(rèn)值為0.彈性子元素將按照給定的數(shù)字進(jìn)行排列，如下圖所示。2.5.2 flex-grow該屬性設(shè)置彈性子元素的擴(kuò)展比率（flex-grow），該值決定某個子元素相對于其他

11、普通子元素的擴(kuò)展大小?？山邮苤禐閿?shù)字，默認(rèn)值為0，負(fù)數(shù)無效。如果所有的彈性子元素具有相等的flex-grow值，那么所有的子元素將具有相同的大小。第二個元素可以相對比較大，如下圖所示。2.5.3 flex-shrink該屬性設(shè)置彈性子元素的收縮比率（flex-shrink），該值決定某個子元素相對于其他普通子元素的收縮大小。默認(rèn)情況下所有子元素都可以被收縮，如果設(shè)置為0，則不收縮。2.5.4 flex-basis該屬性指定彈性子元素伸縮前的默認(rèn)大小值，相當(dāng)于width和height屬性。如下圖所示，我們設(shè)置第四個子元素的寬度值。2.5.5 flex該屬性為flex-grow, flex-shrink和flex-basis屬性的復(fù)合屬性，一個簡寫的方式。默認(rèn)值為：0 1 auto。注意， W3C推薦使用復(fù)合屬性的方式，因為復(fù)合屬性的方式可以方便地重置沒有指定具體值的屬性以適應(yīng)大部分的常規(guī)應(yīng)用。2.5.6 align-selfalign-self允許獨立的彈性子元素覆蓋彈性容器的默認(rèn)對齊設(shè)置(align-items)。大家到align-items部分獲