摘要：具體的屬性說(shuō)明，請(qǐng)查看網(wǎng)上各大教程。推薦飄零霧雨整理的參考手冊(cè)。本文是對(duì)于我在使用過(guò)程中的碰到的一些問(wèn)題的記錄，留下來(lái)的印象。它的表現(xiàn)為所有子元素的寬度都是它自身內(nèi)容即的寬度不使用來(lái)改變盒模型，且不換行。具體的解釋見(jiàn)上的回答。

具體的屬性說(shuō)明，請(qǐng)查看網(wǎng)上各大教程。推薦飄零霧雨整理的CSS參考手冊(cè)。
本文是對(duì)于我在使用flexbox過(guò)程中的碰到的一些問(wèn)題的記錄，留下來(lái)的印象。

如下默認(rèn)的代碼結(jié)構(gòu)，當(dāng)flex-wrapper這個(gè)容器設(shè)置為display: flex之后，其子元素flex-item即使未顯式的聲明flex屬性，都會(huì)默認(rèn)為flex元素，使用默認(rèn)值，值為：0 1 auto（該值在 Chrome 55.0.2883.87 m 通過(guò)window.getComputedStyle($0, null)["flex"];取得）。

它的表現(xiàn)為所有子元素的寬度都是它自身內(nèi)容即content-box的寬度(不使用box-sizing來(lái)改變盒模型)，且不換行。

https://jsfiddle.net/lyplba/f...

先上一個(gè)我們以往簡(jiǎn)單的多列布局（注意：只作為實(shí)現(xiàn)，不附加其他條件），會(huì)自動(dòng)換行（其實(shí)是被撐下去了），而使用flex布局的形式，你會(huì)發(fā)現(xiàn)，怎么不會(huì)自動(dòng)換行了？即使你把寬度設(shè)為100%也于事無(wú)補(bǔ)，flex它會(huì)自動(dòng)均分父容器的寬度，結(jié)果就如下示例一樣：

float和flex設(shè)置的width是一致的，都為25%

https://jsfiddle.net/lyplba/a...

那么，怎么去換行？這時(shí)候就是使用flex-wrap的時(shí)候了，不單只這個(gè)，還涉及到width和flex-basis。這個(gè)的話請(qǐng)參考Stackoverflow上的問(wèn)答。

flex-basis會(huì)設(shè)置flex元素（不是包裹flex元素的容器，而是該容器內(nèi)的flex子元素）的寬或者高（取決于flex-direction是row還是column），因此會(huì)導(dǎo)致寬度變高度，高度變寬度，確切的情況下才用，不然我個(gè)人一般才用width來(lái)設(shè)置。

通過(guò)設(shè)置flex-wrap的值為wrap，就可以實(shí)現(xiàn)和float一樣的效果了，如下：

https://jsfiddle.net/lyplba/o...

當(dāng)被截取的內(nèi)容被flex所包含的時(shí)候，會(huì)發(fā)現(xiàn)文本截取無(wú)法正常生效。

具體的解釋見(jiàn)Stackoverflow上的回答。

更深入的了解為什么即使一個(gè)flex元素和一個(gè)固定寬度的非flex元素并行的時(shí)候，flex元素內(nèi)容一多就會(huì)撐開(kāi)固定寬度的元素，直至占滿，這里有更深入的解釋說(shuō)明為何會(huì)這樣：Flexbox Implied Minimum Size

結(jié)構(gòu)如下：

  

    

      
這塊使用flex布局的結(jié)構(gòu)，會(huì)使內(nèi)部的子元素?zé)o法被正常截取
    
  

示例結(jié)果：
https://jsfiddle.net/lyplba/r...

這個(gè)需求特別是在弄用戶卡片的時(shí)候特別需要這樣的設(shè)置（是我這邊哈~），看如下截圖：

可以看到關(guān)注按鈕在右側(cè)，flex布局的好處之一就是可以非常方便的處理居中問(wèn)題，假設(shè)現(xiàn)在我們把手機(jī)號(hào)下的日期去掉，按照常規(guī)的做法沒(méi)法居中且還要特別設(shè)置或者用其他方法來(lái)居中(display: table)之類(lèi)的。

具體的解決方法還是點(diǎn)這里看 StackOverflow 上的(果然是面向 Google 編程~)

flex的優(yōu)勢(shì)在于布局方式，任意的上中下、左中右對(duì)齊方式、位置調(diào)整、自適應(yīng)那是相當(dāng)?shù)馁?，可以盡可能的減少使用float、position這種不布局方式，使他們回歸本質(zhì)，就像以前的table，關(guān)于flex布局個(gè)人還是要需要花時(shí)間去實(shí)戰(zhàn)了解。