建站
咨詢
售后
建站咨詢
新聞中心
這篇文章介紹了Flexbox模塊所有基本概念，而且是介紹Flexbox模塊的很好的一篇文章，所以這篇文章非常的長，你要有所準(zhǔn)備。
創(chuàng)新互聯(lián)主營瑯琊網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app開發(fā),瑯琊h5成都小程序開發(fā)搭建,瑯琊網(wǎng)站營銷推廣歡迎瑯琊等地區(qū)企業(yè)咨詢
學(xué)習(xí)Flexbox的曲線
@Philip Roberts在Twitter上發(fā)了一個推：
學(xué)習(xí)Flexbox可不是件很有趣的事情，因為它將挑戰(zhàn)你所知道的CSS布局方面的知識。當(dāng)然這也是非常正常的，因為一切知識都是值得學(xué)習(xí)的。
另外你要認(rèn)值對待Flexbox。因為它是現(xiàn)代Web布局的主流方式之一，不會很快就消失。它也成為一個新的W3C標(biāo)準(zhǔn)規(guī)范。既然如此，那讓我們張開雙臂，開始擁抱它吧！
你將學(xué)習(xí)
我將帶你先了解Flexbox的一些基礎(chǔ)知識。我想這是開始嘗試學(xué)習(xí)Flexbox的必經(jīng)階段。
學(xué)習(xí)基礎(chǔ)知識是件很有意思的事情，更有意思的是可以通過學(xué)習(xí)這些基礎(chǔ)理論知識，在實際的應(yīng)用程序中使用Flexbox。
我將帶您親歷很多“小知識點”之后，在文章末尾，使用Flexbox來做一個音樂應(yīng)用程序的布局（UI界面布局）。
看上去是不是棒棒的？
在開始進(jìn)入學(xué)習(xí)Flexbox構(gòu)建音樂應(yīng)用程序的布局之前，你還將需要了解Flexbox在響應(yīng)式Web設(shè)計中所起的作用。
我將會把這一切都告訴你。
上圖是@Jona Dinges設(shè)計的。
在你開始構(gòu)建音樂應(yīng)用程序界面之前，我將一起陪你做一些練習(xí)。這看起來可能很無聊，但這是讓你徹底掌握Flexbox必經(jīng)的過程，只有這樣才能讓你很擅長的使用Flexbox。
說了這么多的廢話，那我們趕緊的開始吧！（難怪篇幅長，原來開始有這么的…(^_^)）
簡介
CSS在過去的幾年里已發(fā)生了很大的變化。CSS中引入了設(shè)計師喜歡的filters、transitions和transforms等。但有些東西已經(jīng)消失了，可是我們都渴望這些東西能一直存在。
使用CSS制作智能的、靈活的頁面布局一直以來都是CSSer想要的，也有很人使用各種不同的CSS黑魔法去實現(xiàn)智能的頁面布局。
我們總是不得不忍受float、display:table這些布局方式帶來的痛苦。如果你完寫過一段時間的CSS，你可能有相關(guān)體會。如果你沒有寫過CSS，那你是幸運的，在這也歡迎你來到CSS布局中一個更美好的世界中！
似乎設(shè)計師和前端開發(fā)人員的這次祈禱終于被上帝聽到了。而且這一次，在很大的風(fēng)格上做出了改變。
現(xiàn)在我們可以拋棄老司機(jī)們常用的CSS布局的黑魔法。也可以和float以及display:table說拜拜。
是時候去擁抱一個更簡潔的制作智能布局的現(xiàn)代語法。歡迎CSS Flexbox模塊的到來。
Flexbox是什么
根據(jù)規(guī)范中的描述可知道，F(xiàn)lexbox模塊提供了一個有效的布局方式，即使不知道視窗大小或者未知元素情況之下都可以智能的，靈活的調(diào)整和分配元素和空間兩者之關(guān)的關(guān)系。簡單的理解，就是可以自動調(diào)整，計算元素在容器空間中的大小。
這樣聽起來是不是太官方了，其實我也明白這種感覺。
如何開始使用Flexbox
這是每個人都會問的第一個問題，答案是比你預(yù)想的要簡單得多。
開始使用Flexbox時，你所要做的第一件事情就是聲明一個Flex容器(Flex Container)。
比如一個簡單的項目列表，我們常?？吹降腍TML形式如下所示：
一眼就能看出來，這就是一個無序列表(ul)里有三個列表元素(li)。
你可以把ul稱為父元素，li稱為子元素。
要開始使用Flexbox，必須先讓父元素變成一個Flex容器。
你可以在父元素中顯式的設(shè)置display:flex或者display:inline-flex。就這么的簡單，這樣你就可以開始使用Flexbox模塊。
實際是顯式聲明了Flex容器之后，一個Flexbox格式化上下文（Flexbox formatting context）就立即啟動了。
告訴你，它不是像你想像的那么復(fù)雜。
使用一個無序列表(ul)和一群列表元素(li)，啟動Flexbox格式化上下文的方式如下：
/* 聲明父元素為flex容器 */
ul {
display:flex; /*或者 inline-flex*/
}給列表元素(li)添加一點基本樣式，這里你可以看到發(fā)生了什么。
li {
width: 100px;
height: 100px;
background-color: #8cacea;
margin: 8px;
}你將看到的效果如下圖所示：
你可能沒有注意到，但事實上已經(jīng)發(fā)生了變化?，F(xiàn)在已經(jīng)是一個Flexbox格式化上下文。
記住，默認(rèn)情況下，div在CSS中垂直堆棧的，也就是說從上到下排列顯示，就像下圖這樣：
上面的圖是你希望的結(jié)果。
然而，簡單的寫一行代碼display:flex，你立即就可以看到布局改變了。
現(xiàn)在列表元素(li)水平排列，從左到右。就像是你使用了float一樣。
Flexbox模塊的開始，正如前面的介紹，在任何父元素上使用display:flex。
你可能不明白為什么這一變化就能改變列表元素的排列方式。但我可以負(fù)責(zé)任的告訴你，你深入學(xué)習(xí)之后就能明白?，F(xiàn)在你只需要信任就足夠了。
理解flex display是使用Flexbox的一個開始。
還有一件事情，我需要提醒您注意。
一旦你顯式的設(shè)置了display屬性的值為flex，無序列表ul就會自動變成Flex容器，而其子元素（在本例中是指列表元素li）就變成了Flex項目。
這些術(shù)語會一次又一次的提到，我更希望你通過一些更有趣的東西來幫助你學(xué)習(xí)Flexbox模塊。
我使用了兩個關(guān)鍵詞，我們把重點放到他們身上。了解他們對于理解后面的知識至關(guān)重要。
- Flex容器（Flex Container）：父元素顯式設(shè)置了
display:flex - Flex項目（Flex Items）：Flex容器內(nèi)的子元素
這些只是Flexbox模塊的基礎(chǔ)。
Flex容器屬性
flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
通過上面的內(nèi)容，我們了解了一些基礎(chǔ)知識。知道了Flex容器和Flex項目是什么，以及如何啟動Flexbox模塊。
現(xiàn)在是一個好好利用它們的時間了。
有設(shè)置一個父元素作為一個Flex容器，幾個對齊屬性可以使用在Flex容器上。
正如你的塊元素的width設(shè)置了200px，有六種不同的屬性可以用于Flex容器。
好消息是，定義這些屬性不同于你以往使用過的任何一種方法。
flex-direction
flex-direction屬性控制Flex項目沿著主軸（Main Axis）的排列方向。
它具有四個值：
/* ul 是一個flex容器 */
ul {
flex-direction: row || column || row-reverse || column-reverse;
}簡單點來說，就是flex-direction屬性讓你決定Flex項目如何排列。它可以是行（水平）、列（垂直）或者行和列的反向。
從技術(shù)上講，水平和垂直在Flex世界中不是什么方向（概念）。它們常常被稱為主軸（Main-Axis）和側(cè)軸（Cross-Axis）。默認(rèn)設(shè)置如下所示。
通俗的說，感覺Main-Axis就是水平方向，從左到右，這也是默認(rèn)方向。Cross-Axis是垂直方向，從上往下。
默認(rèn)情況下，flex-direction屬性的值是row。它讓Flex項目沿著Main-Axis排列（從左向右，水平排列）。這就解釋了本文開始部分時無序列表的表現(xiàn)效果。
盡管flex-direction屬性并沒有顯式的設(shè)置，但它的默認(rèn)值是row。Flex項目將沿著Main-Axis從左向右水平排列。
如果把flex-direction的屬性值修改成column，這時Flex項目將沿著Cross-Axis從上到下垂直排列。不再是從左向右排列。
flex-wrap
flex-wrap屬性有三個屬性值：
ul {
flex-wrap: wrap || nowrap || wrap-reverse;
}我將通過一個例子來解釋如何使用flex-wrap屬性。首先在前面的無序列表的HTML結(jié)構(gòu)中多添加幾個列表項li。
將Flex容器設(shè)置適合大小以適合放置更多的列表項目或者說讓列表項目換行排列。這兩種方式，你是怎么想的？
幸運的是，新添加的Flex項目剛好適合Flex容器大小。也就是Flex項目能剛好填充Flex容器。
再深入一點。
繼續(xù)給Flex容器內(nèi)添加Flex項目，比如說添加到10個Flex項目。這個時候會發(fā)生什么？
同樣的，F(xiàn)lex容器還是能容納所有的子元素（Flex項目）排列，即使瀏覽器出現(xiàn)了水平滾動條（當(dāng)Flex容器中添加了很多個Flex項目，至使Flex容器的寬度大于視窗寬度）。
這是每一個Flex容器的默認(rèn)行為。Flex容咕嚕會在一行內(nèi)容納所有的Flex項目。這是因為flex-wrap屬性的默認(rèn)值是nowrap。也就是說，F(xiàn)lex項目在Flex容器內(nèi)不換行排列。
ul {
flex-wrap: nowrap; /*Flex容器內(nèi)的Flex項目不換行排列*/
}no-wrap不是不可改變的。我們可以改變。
當(dāng)你希望Flex容器內(nèi)的Flex項目達(dá)到一定數(shù)量時，能換行排列。當(dāng)Flex容器中沒有足夠的空間放置Flex項目（Flex項目默認(rèn)寬度），那么Flex項目將會換行排列。把它（flex-wrap）的值設(shè)置為wrap就有這種可能：
ul {
flex-wrap: wrap;
}現(xiàn)在Flex項目在Flex容器中就會多行排列。
在這種情況下，當(dāng)一行再不能包含所有列表項的默認(rèn)寬度，他們就會多行排列。即使調(diào)整瀏覽器大小。
就是這樣子。注意：Flex項目現(xiàn)在顯示的寬度是他們的默認(rèn)寬度。也沒有必要強(qiáng)迫一行有多少個Flex項目。
除此之外，還有一個值：wrap-reverse。
是的，你猜對了。它讓Flex項目在容器中多行排列，只是方向是反的。
flex-flow
flex-flow是flex-direction和flex-wrap兩個屬性的速記屬性。
你還記得使用border的速記寫法？border: 1px solid red。這里的概念是相同的，多個值寫在同一行，比如下面的示例：
ul {
flex-flow: row wrap;
}相當(dāng)于：
ul {
flex-direction: row;
flex-wrap: wrap;
}除了這個組合之外，你還可以嘗試一些其它的組合。flex-flow: row nowrap，flex-flow: column wrap，flex-flow: column nowrap。
我相信你了解這些會產(chǎn)生什么樣的效果，要不嘗試一下。
justify-content
Flexbox模塊真得很好。如果你仍然不相信它的魅力，那么justify-content屬性可能會說服你。
justify-content屬性可以接受下面五個值之一：
ul {
justify-content: flex-start || flex-end || center || space-between || space-around
}justify-content屬性又能給我們帶來什么呢？提醒你一下，你是否還記得text-align屬性。其實justify-content屬性主要定義了Flex項目在Main-Axis上的對齊方式。
來看一個簡單的例子，還是考慮下面這個簡單的無序列表：
- 1
- 2
- 3
添加一些基本樣式：
ul {
display:flex;
border: 1px solid red;
padding: 0;
list-style: none;
background-color: #e8e8e9;
}
li {
background-color: #8cacea;
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
}你將看到的效果是這樣：
通過justify-content屬性，可以讓Flex項目在整個Main-Axis上按照我自己的欲望設(shè)置其對齊方式。
可能會有以下幾種類型。
flex-start
justify-content的默認(rèn)屬性值是flex-start。
flex-start讓所有Flex項目靠Main-Axis開始邊緣（左對齊）。
ul {
justify-content: flex-start;
}flex-end
flex-end讓所有Flex項目靠Main-Axis結(jié)束邊緣（右對齊）。
ul {
justify-content: flex-end;
}center
和你預(yù)期的一樣，center讓所有Flex項目排在Main-Axis中間（居中對齊）。
ul {
justify-content: center;
}space-between
space-between讓除了第一個和最一個Flex項目的兩者間間距相同（兩端對齊）。
ul {
justify-content: space-between;
}你注意到有什么不同？看看下圖的描述：
space-around
最后，space-around讓每個Flex項目具有相同的空間。
ul {
justify-content: space-around;
}和space-between有點不同，第一個Flex項目和最后一個Flex項目距Main-Axis開始邊緣和結(jié)束邊緣的的間距是其他相鄰Flex項目間距的一半。看看下圖的描述：
千萬不要覺得這些練習(xí)太多，這些練習(xí)可以幫助熟悉Flexbox屬性的語法。也能更好的幫助你更好的理解它們是如何影響Flex項目沿著Main-Axis的對齊方式。
align-items
align-items屬性類似于justify-content屬性。只有理解了justify-content屬性，才能更好的理解這個屬性。
align-items屬性可以接受這些屬性值：flex-start || flex-end || center || stretch || baseline。
ul {
align-items: flex-start || flex-end || center || stretch || baseline
}它主要用來控制Flex項目在Cross-Axis對齊方式。這也是align-items和justify-content兩個屬性之間的不同之處。
下面是不同的值對Flex項目產(chǎn)生的影響。不要忘記這些屬性只對Cross-Axis軸有影響。
stretch
align-items的默認(rèn)值是stretch。讓所有的Flex項目高度和Flex容器高度一樣。
flex-start
正如你所希望的flex-start讓所有Flex項目靠Cross-Axis開始邊緣（頂部對齊）。
flex-end
flex-end讓所有Flex項目靠Cross-Axis結(jié)束邊緣（底部對齊）。
center
center讓Flex項目在Cross-Axis中間（居中對齊）。
baseline
讓所有Flex項目在Cross-Axis上沿著他們自己的基線對齊。
結(jié)果看上去有點像flex-start，但略有不同。那“baseline”到底是什么呢？下圖應(yīng)該能幫助你更好的理解。
align-content
還記得前面討論的wrap屬性嗎？我們在Flex容器中添加了更多的Flex項目。讓Flex容器中的Flex項目多行排列。
align-content屬性用于多行的Flex容器。它也是用來控制Flex項目在Flex容器里的排列方式，排列效果和align-items值一樣，但除了baseline屬性值。
像align-items屬性一樣，它的默認(rèn)值是stretch。你現(xiàn)在應(yīng)該熟悉這些值。那它又是如何影響Flex容器里的10個Flex項目多行排列方式。
stretch
使用stretch會拉伸Flex項目，讓他們沿著Cross-Axis適應(yīng)Flex容器可用的空間。
你看到的Flex項目間的間距，是Flex項目自身設(shè)置的margin值。
flex-start
之前你看到過flex-start。這次是讓多行Flex項目靠Cross-Axis開始邊緣。沿著Cross-Axis從上到下排列。因此Flex項目在Flex容器中頂部對齊。
flex-end
flex-end剛好和flex-start相反，讓多行Flex項目靠著Cross-Axis結(jié)束位置。讓Flex項目沿著Cross-Axis從下到上排列，即底部對齊。
center
你猜到了，center讓多行Flex項目在Cross-Axis中間。在Flex容器中居中對齊。
這是Flex容器的最后一個屬性。你現(xiàn)在知道如何使用各種Flex容器屬性。你可以在工作中實踐這些屬性。
Flex項目屬性
order || flex-grow || flex-shrink || flex-basis
在前一節(jié)中，我解釋了Flex容器及其對齊屬性。
確實漂亮。我想你也找到了感覺?，F(xiàn)在我們把注意力從Flex容器轉(zhuǎn)移到Flex項目及其對齊屬性。
像Flex容器，對齊屬性也可以用在所有的Flex項目。那我們開始吧。
order
允許Flex項目在一個Flex容器中重新排序?；旧?，你可以改變Flex項目的順序，從一個位置移動到另一個地方。
這不會影響源代碼。這也意味著Flex項目的位置在HTML源代碼中不需要改變。order屬性的默認(rèn)值是0。它可以接受一個正值，也可以接受一個負(fù)值。
值得注意的是，F(xiàn)lex項目會根據(jù)order值重新排序。從底到高。
要說明總得需要一個例子?？紤]下面這個無序列表：
- 1
- 2
- 3
- 4
默認(rèn)情況下，所有Flex項目的order值都是0。把前面給列表的樣式運用過來?？吹降男Ч缦拢?/p>
Flex項目顯示是按HTML源代碼中的順序來顯示，F(xiàn)lex項目1、2、3和4。
如果因為某些原因，在不改變HTML文檔源碼情況之下，想把Flex項目一從1變成最后。不能修改HTML文檔源碼意思是你不能把HTML代碼改成：
- 2
- 3
- 4
- 1
這個時候就需要order屬性。這個時候你需要把Flex項目一的order值設(shè)置比其他Flex項目值更大。
如果你以前使用過z-index屬性，那你就能更好的理解這個屬性。
li:nth-child(1){
order: 1; /*設(shè)置一個比0更大的值*/
}Flex項目就重新進(jìn)行了排列，從低到高排列。不要忘記了，默認(rèn)情況下，F(xiàn)lex項目2、3、4的order值為0?，F(xiàn)在Flex項目1的order值為1。
Flex項目2、3和4的order值都是0。HTML源代碼秩序并沒有修改過。如果給Flex項目2的order設(shè)置為2呢？
是的，你猜對了。它也增加堆?！，F(xiàn)在代表Flex項目的最高的order值。
當(dāng)兩個Flex項目具有相同的order值呢？在下面的示例中，把Flex項目1和3設(shè)置相同的order值。
li:nth-child(1) {
order: 1;
}
li:nth-child(3) {
order: 1;
}現(xiàn)在仍是從低到高排列。這次Flex項目3排在Flex項目1后面，那是因為在HTML文檔中Flex項目3出現(xiàn)在Flex項目1后面。
如果兩個以下Flex項目有相同的order值時，F(xiàn)lex項目重新排序是基于HTML源文件的位置進(jìn)行排序。這個屬性就不做過多的解釋。接下來繼續(xù)介紹其他的屬性。
flex-grow 和 flex-shrink
Flex項目最優(yōu)秀的一點就是靈活性。flex-grow和flex-shrink屬性允許我們玩這個靈活性。
flex-grow和flex-shrink屬性控制Flex項目在容器有多余的空間如何放大（擴(kuò)展），在沒有額外空間又如何縮小。
他們可能接受0或者大于0的任何正數(shù)。0 || positive number。
接下來闡述它們的使用。使用一個簡單的無序列表做為例子，它只包含一個列表項。
- I am a simple list
添加更多的樣式，看起來像這樣：
默認(rèn)情況下，flex-grow屬性值設(shè)置為0。表示Flex項目不會增長，填充Flex容器可用空間。取值為0就是一個開和關(guān)的按鈕。表示flex-grow開關(guān)是關(guān)閉的。
如果把flex-grow的值設(shè)置為1，會發(fā)生：
現(xiàn)在Flex項目擴(kuò)展了，占據(jù)了Flex容器所有可用空間。也就是說開關(guān)打開了。如果你試著調(diào)整你瀏覽器的大小，F(xiàn)lex項目也會縮小，以適應(yīng)新的屏幕寬度。
為什么？默認(rèn)情況下，flex-shrink的值是1，也就是說flex-shrink開關(guān)也是打開的。
可以仔細(xì)看看flex-grow和flex-shrink屬性在各種情況下的效果，這樣能更好的幫助你理解。
flex-basis
記得前面我說過，F(xiàn)lex項目是當(dāng)我沒有的。但我們也可以控制。
flex-basis屬性可以指定Flex項目的初始大小。也就是flex-grow和flex-shrink屬性調(diào)整它的大小以適應(yīng)Flex容器之前。
前面介紹的是非常生要的，所以我們需要花一點時間來加強(qiáng)對他們的理解。
flex-basis默認(rèn)的值是auto。flex-basis可以取任何用于width屬性的任何值。比如 % || em || rem || px等。
注意：如果flex-basis屬性的值是0時，也需要使用單位。即flex-basis: 0px不能寫成flex-basis:0。
這里同樣使用只有一個列表項的列表做為示例。
- I am a simple list
默認(rèn)情況，F(xiàn)lex項目的初始寬度由flex-basis的默認(rèn)值決定，即：flex-basis: auto。Flex項目寬度的計算是基于內(nèi)容的多少來自動計算（很明顯，加上了padding值）。
這意味著，如果你增加Flex項目中的內(nèi)容，它可以自動調(diào)整大小。
- I am a simple list AND I am a simple list
然而，如果你想將Flex項目設(shè)置一個固定的寬度，你也可以這樣做：
li {
flex-basis: 150px;
}現(xiàn)在Flex項目的寬度受到了限制，它的寬度是150px。
它變得更加有趣。
flex速記
flex是flex-grow、flex-shrink和flex-basis三個屬性的速記（簡寫）。
在適當(dāng)?shù)臅r候，我建議你使用flex，這樣比使用三個屬性方便。
li {
flex: 0 1 auto;
}上面的代碼相當(dāng)于：
li {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}注意它們之間的順序。flex-grow第一，然后是flex-shrink，最后是flex-basis?？s寫成GSB，可以幫助你更好的記憶。
如果flex屬性值中少一個值，會發(fā)生什么呢？
如果你只設(shè)置了flex-grow和flex-shrink值，flex-basis可能是默認(rèn)值0。這就是所謂的絕對flex項目。只有當(dāng)你設(shè)置了flex-basis，你會得到一個相對flex項目。
/* 這是一個絕對的Flex項目 */
li {
flex: 1 1; /*flex-basis 默認(rèn)值為 0*/
}
/* 這是一個相對的Flex項目 */
li {
flex-basis: 200px; /* 只設(shè)置了flex-basis的值 */
}我知道你在想什么。你肯定想知道相對和絕對的Flex項目是什么？我將在后面回答這個問題。你只需要再次盲目信任就足夠了。
讓我們看看一些非常有用的flex值。
flex: 0 1 auto
li {
flex: 0 1 auto;
}這相當(dāng)于寫了flex默認(rèn)屬性值以及所有的Flex項目都是默認(rèn)行為。
很容易理解這一點，首先看看flex-basis屬性。flex-basis設(shè)置為auto，這意味著Flex項目的初始寬度計算是基于內(nèi)容的大小。
明白了？
把注意力放到下一個屬性，flex-grow設(shè)置為0。這意味著flex-grow不會改變Flex項目的初始寬度。也就是說，flex-grow的開關(guān)是關(guān)閉的。
flex-grow控制Flex項目的增長，如果其值設(shè)置為0，F(xiàn)lex項目不會放大以適應(yīng)屏幕（Flex容器大?。?。
最后，flex-shrink的值是1。也就是說，F(xiàn)lex項目在必要時會縮小。
應(yīng)用到Flex項目效果就是這樣子：
注意：Flex項目沒有增長（寬度）。如果有必要，如果調(diào)整瀏覽器(調(diào)小瀏覽器寬度)，F(xiàn)lex項目會自動計算寬度。
flex: 0 0 auto
li {
flex: 0 0 auto;
}這個相當(dāng)于flex: none。
還是老規(guī)矩：寬度是被自動計算，不過彈性項目不會伸展或者收縮（因為二者都被設(shè)置為零）。伸展和收縮開關(guān)都被關(guān)掉了。
它基本上是一個固定寬度的元素，其初始寬度是基于彈性項目中內(nèi)容大小。
看看這個 flex 簡寫是如何影響兩個彈性項目的。一個彈性項目會比另一個容納更多內(nèi)容。
應(yīng)該注意到的第一件事情是，這兩個彈性項目的寬度是不同的。因為寬度是基于內(nèi)容寬度而自動計算的，所以這是預(yù)料得到的。
試著縮放一下瀏覽器，你會注意到彈性項目不會收縮其寬度。它們從父元素中突出來了，要看到所有內(nèi)容，必須橫向滾動瀏覽器。
不要著急，稍后我會展示如何處理這種怪異的行為。
在縮放瀏覽器時，彈性項目不會收縮，而是從彈性容器中突出來了。
flex: 1 1 auto
這與 flex: auto 項目相同。
還是按我前面立的規(guī)矩。即，自動計算初始化寬度，但是如果有必要，會伸展或者收縮以適應(yīng)整個可用寬度。
伸展和收縮開關(guān)打開了，寬度自動被計算。
此時，項目會填滿可用空間，在縮放瀏覽器時也會隨之收縮。
flex: “positive number”
這里正數(shù)可以代表任何正數(shù)（沒有引號）。這與 flex: “正數(shù)” 1 0 相同。
flex: 2 1 0 與寫為 flex: 2 是一樣的，2表示任何正數(shù)。
li {
flex: 2 1 0; / *與 flex: 2相同 */
}與前面我立的規(guī)矩一樣，即，將彈性項目的初始寬度設(shè)置為零（嗯？沒有寬度？），伸展項目以填滿可用空間，并且最后只要有可能就收縮項目。
彈性項目沒有寬度，那么寬度該如何計算呢？
這個時候 flex-grow 值就起作用了，它決定彈性項目變寬的程度。由它來負(fù)責(zé)沒有寬度的問題。
當(dāng)有多個彈性項目，并且其初始寬度 flex-basis 被設(shè)置為基于零的任何值時，比如 0px，使用這種 flex 簡寫更實用。
實際發(fā)生的是，彈性項目的寬度被根據(jù) flex-grow 值的比例來計算。
考慮如下兩個列表項標(biāo)記及 CSS：
- I am One
- I am Two
記住設(shè)置 flex-grow : 1，會讓彈性項目填滿可用空間。伸展開關(guān)打開了。
這里有兩個彈性項目。一個的 flex-grow 屬性值是 1，另一個是 2，那么會出現(xiàn)啥情況呢？
兩個項目上的伸展開關(guān)都打開了。不過，伸展度是不同的，1 和 2。
二者都會填滿可用空間，不過是按比例的。
它是這樣工作的：前一個占 1/3 的可用空間，后一個占 2/3 的可用空間。
知道是我怎么得到這結(jié)果的么？
是根據(jù)基本的數(shù)學(xué)比例。”單項比例 / 總比例”，我希望你沒有漏過這些數(shù)學(xué)課。
看到出現(xiàn)啥情況了么？
即使兩個彈性項目內(nèi)容一樣大（近似），它們所占空間還是不同。寬度不是基于內(nèi)容的大小，而是伸展值。一個是另一個的約兩倍。
有關(guān)于
flex-grow、flex-basis和flex-shrink之間的詳細(xì)計算，可以點擊@Chris Wright寫的《Flexbox adventures》博文。譯文可以點擊這里。
align-self
align-self 屬性更進(jìn)一步讓我們更好地控制彈性項目。
你已經(jīng)看到 align-items 屬性是如何有助于整體對齊彈性容器內(nèi)的所有彈性項目了。
如果想改變一個彈性項目沿著側(cè)軸的位置，而不影響相鄰的彈性項目，該怎么辦呢？
這是 align-self 屬性大展拳腳的地方了。
該屬性的取值可以是這些值之一：auto || flex-start || flex-end || center || baseline || stretch。
li:first-of-type {
align-self: auto || flex-start || flex-end || center || baseline || stretch
}這些值你已經(jīng)熟悉過了，不過作為回顧，如下是它們?nèi)绾斡绊懱囟繕?biāo)項目。這里是容器內(nèi)的第一個項目。目標(biāo)彈性項目是紅色的。
flex-end
flex-end將目標(biāo)項目（Flex項目）對齊到Cross-Axis的末端。
center
center將目標(biāo)項目（Flex項目）對齊到Cross-Axis的中間。
stretch
stretch會將目標(biāo)項目拉伸，以沿著Cross-Axis填滿Flex容器的可用空間（Flex項目高度和Flex容器高度一樣）。
baseline
baseline將目標(biāo)項目沿著基線對齊。它與flex-start的效果看起來是一樣的，不過我相信你理解了基線是什么。因為前面已經(jīng)解釋過。
auto
auto 是將目標(biāo)Flex項目的值設(shè)置為父元素的 align-items值，或者如果該元素沒有父元素的話，就設(shè)置為 stretch。
在下面的情況下，彈性容器的 align-items 值為 flex-start。這會把所有彈性項目都對齊到Cross-Axis的開頭。目標(biāo)Flex項目現(xiàn)在繼承了 flex-start 值，即父元素的 align-item 值。
如下是上面Flex項目的基礎(chǔ)樣式。這樣你可以對發(fā)生的事情理解得更好點。
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: flex-start; /* 影響所有彈性項目 */
min-height: 50%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
font-size: 2rem;
}現(xiàn)在你差不多已經(jīng)為有趣的部分做好準(zhǔn)備了
絕對和相對Flex項目
前面了解了一些基本概念，但重要的是要澄清一些重要的概念。那絕對和相對Flex項目之間到底有啥區(qū)別呢？二者之間主要的區(qū)別在于間距及如何計算間距。
一個相對Flex項目內(nèi)的間距是根據(jù)它的內(nèi)容大小來計算的。而在絕對Flex項目中，只根據(jù) flex 屬性來計算，而不是內(nèi)容。
考慮如下的標(biāo)記：
- This is just some random text to buttress the point being explained. Some more random text to buttress the point being explained.
- This is just a shorter random text.
兩個列表項元素，一個比另一個的文本多得多。
加點樣式：
ul {
display: flex; /*觸發(fā)彈性盒*/
}
li {
flex: auto; /*記住這與 flex: 1 1 auto; 相同*/
border: 2px solid red;
margin: 2em;
}如下是結(jié)果：
如果你已經(jīng)忘了的話，flex: 1 1 auto 是與 flex-grow: 1、flex-shrink: 1 和 flex-basis: auto 相同的。
Flex項目的初始寬度是被自動計算的（flex-basis: auto），然后會伸展以適應(yīng)可用空間（flex-grow: 1）。
當(dāng)Flex項目因為被設(shè)置為 flex-basis: auto，而導(dǎo)致寬度被自動計算時，是基于Flex項目內(nèi)包含的內(nèi)容的大小而計算。
上面示例中Flex項目的內(nèi)容大小不相同。因此，F(xiàn)lex項目的大小就會不相等。
既然各個寬度開始就不是相等的（它是基于內(nèi)容的），那么當(dāng)項目伸展時，寬度也保持不相等。
上面示例中的Flex項目是相對Flex項目。
下面我們把Flex項目變成絕對的, 就是說這次它們的寬度是基于 flex屬性，而不是內(nèi)容的大小。一行代碼就可以出奇跡。
li {
flex: 1 ; /*與 flex: 1 1 0 相同*/
}效果如下：
這次看到兩個Flex項目的寬度相同了嗎？
Flex項目的初始寬度是零（flex-basis: 0），并且它們會伸展以適應(yīng)可用空間。當(dāng)有兩到多個Flex項目的 flex-basis 取值為0時，它們會基于 flex-grow值共享可用空間。
這個之前就討論過了?，F(xiàn)在寬度不會基于內(nèi)容大小而計算，而是基于指定的 flex 屬性值來計算。這樣你就明白了吧。對么？
絕對Flex項目的寬度只基于 flex 屬性，而相對Flex項目的寬度基于內(nèi)容大小。
Auto-margin 對齊
當(dāng)心Flex項目上的 margin: auto 對齊。當(dāng)在Flex項目上使用 margin: auto 時，事情看起來就很怪異了。
你需要理解會發(fā)生什么。它會導(dǎo)致不可預(yù)料的結(jié)果，不過我打算解釋解釋。
當(dāng)在Flex項目上使用 margin: auto 時，值為 auto 的方向（左、右或者二者都是）會占據(jù)所有剩余空間。
這玩意有點難理解。下面我來說明一下。
考慮如下的導(dǎo)航欄標(biāo)記以及 CSS 樣式：
- Branding
- Home
- Services
- About
- Contact
你可以看到如下的效果：
這里有幾件事情要注意：
flex-grow值為設(shè)置為0。這就解釋了為什么列表項不會伸展。- Flex項目向Main-Axis的開頭對齊（這是默認(rèn)行為）。
- 由于項目被對齊到Main-Axis開頭，右邊就有一些多余的空間?？吹搅税?？
現(xiàn)在在第一個列表項（branding）上使用 margin: auto，看看會出啥情況。
li:nth-child(1) {
margin-right: auto; /*只應(yīng)用到右外邊距*/
}剛剛發(fā)生了什么？之前的剩余空間現(xiàn)在已經(jīng)被分配到第一個Flex項目的右邊了。
還記得我前面說的話吧？當(dāng)在Flex項目上使用 margin: auto 時，值為 auto 的方向（左、右或者二者都是）會占據(jù)所有剩余空間。
如果想讓一個Flex項目的兩邊都用自動外邊距對齊，該怎么辦呢？
/* 如果愿意的話，也可以用 margin 簡寫來設(shè)置兩個邊 */
li:nth-child(1) {
margin-left: auto;
margin-right: auto
}現(xiàn)在空白被分配到Flex項目的兩邊了。
那么，這是不是對很酷的自動外邊距對齊的一種折衷方案呢？看起來是。如果沒注意的話，它也可能是受挫之源。當(dāng)在一個Flex項目上使用自動外邊距（margin: auto）時，justify-content 屬性就不起作用了。
例如，在上面的Flex容器上通過 justify-content屬性，設(shè)置不同的對齊選項時，對布局沒有影響。
ul {
justify-content: flex-end;
}Flexbox實戰(zhàn)
導(dǎo)航系統(tǒng)是每個網(wǎng)站或者應(yīng)用程序的重要組成部分。這個世界上的每個網(wǎng)站都會有某種導(dǎo)航系統(tǒng)。
下面我們看看這些熱門網(wǎng)站，以及它們是如何實現(xiàn)其導(dǎo)航系統(tǒng)的。你看到Flexbox是如何幫助你更高效地創(chuàng)建這些布局嗎？
也仔細(xì)看看哪里會用得上自動外邊距特性。
Bootstrap導(dǎo)航
AirBnB PC端導(dǎo)航
Twitter PC端導(dǎo)航
建議你自己寫代碼。試著自己實現(xiàn)這些導(dǎo)航系統(tǒng)。現(xiàn)在你已經(jīng)掌握了所需的所有知識。你所需要的是一點勇氣去開始寫。
下一節(jié)再見。但愿在你已經(jīng)完成了導(dǎo)航系統(tǒng)練習(xí)之后。
切換flex-direction會發(fā)生什么？
提醒一下：將會有一些奇怪的東東出現(xiàn)。
在入手學(xué)習(xí)Flexbox時，這個部分是最惱火的。我估計很多彈性世界的新手也會發(fā)現(xiàn)如此。
還記得我說過默認(rèn)的Main-Axis方向是從左到右，Cross-Axis方向是從上到下吧？
好吧，現(xiàn)在你也可以改變這個方向。
正如在較早的小節(jié)中所描述的那樣，用 flex-direction: column 時，確實是這樣。
當(dāng)用 flex-direction: column 時，Main-Axis和Cross-Axis會向如下所看到的那樣改變：
如果曾用英語寫過文字，那么你就知道英語是從左到右，從上到下來寫的。
Flexbox的默認(rèn)Main-Axis和Cross-Axis也是采用同樣的方向。
不過，如果將 flex-direction 切換為 column，它就不再遵循英語的范式，而是日語的范式！
是的，日語。
如果你用日語寫過文字，那么應(yīng)該很熟悉了。（鄭重聲明，我從沒用過日語寫過文字）。
日文通常是從上到下寫的！沒那么怪，對吧？
這就解釋了為嘛這對英語寫作者可能有點惱火。
看看下面這個例子。標(biāo)準(zhǔn)無序列表(ul)，帶有 3 個列表項(li)。不過這次我要改變一下flex-direction。
如下是方向變化之前的樣子：
如下是方向變化之后的樣子：
出啥事了？
現(xiàn)在文字是以日語風(fēng)格寫的：沿Main-Axis從上到下。
我很樂意指出，你會發(fā)現(xiàn)一些有趣的事情。
你會看到項目的寬度填滿了空間，對吧？
如果在之前要變成這樣子，得處理 flex-basis 以及 flex-grow 屬性。
下面來看看這些會如何影響新的布局。
li {
flex-basis: 100px;
}下面是你會得到的。
什么？高度是被影響了，但是寬度沒有??？我之前說過，flex-basis 屬性定義每個Flex項目的初始寬度。
我是錯的，或者這樣說更好：我是用英語來思考。下面我們姑且切換到用日語思考。并且總是得有寬度。
在切換 flex-direction 時，請注意，影響Main-Axis的每一個屬性現(xiàn)在會影響新Main-Axis。像 flex-basis 這種會影響Main-Axis上Flex項目寬度的屬性，現(xiàn)在會影響項目的高度，而不是寬度。
方向已經(jīng)被切換了！
所以，即使你使用 flex-grow 屬性，它也是影響高度。本質(zhì)上，每個作用于橫向軸（即Main-Axis）
網(wǎng)站名稱：Flexbox模塊所有基本概念及特點
文章位置：http://www.dlmjj.cn/article/codgodh.html
