個人CSS Flex印象

具體的屬性說明，請查看網上各大教程。推薦飄零霧雨整理的CSS參考手冊。
本文是對於我在使用flexbox過程當中的碰到的一些問題的記錄，留下來的印象。

默認

以下默認的代碼結構，當flex-wrapper這個容器設置爲display: flex以後，其子元素flex-item即便未顯式的聲明flex屬性，都會默認爲flex元素，使用默認值，值爲：0 1 auto（該值在 Chrome 55.0.2883.87 m 經過window.getComputedStyle($0, null)['flex'];取得）。

它的表現爲全部子元素的寬度都是它自身內容即content-box的寬度(不使用box-sizing來改變盒模型)，且不換行。

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

換行

先上一個咱們以往簡單的多列布局（注意：只做爲實現，不附加其餘條件），會自動換行（實際上是被撐下去了），而使用flex佈局的形式，你會發現，怎麼不會自動換行了？即便你把寬度設爲100%也於事無補，flex它會自動均分父容器的寬度，結果就以下示例同樣：

float和flex設置的width是一致的，都爲25%

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

那麼，怎麼去換行？這時候就是使用flex-wrap的時候了，不單隻這個，還涉及到width和flex-basis。這個的話請參考Stackoverflow上的問答。

flex-basis會設置flex元素（不是包裹flex元素的容器，而是該容器內的flex子元素）的寬或者高（取決於flex-direction是row仍是column），所以會致使寬度變高度，高度變寬度，確切的狀況下才用，否則我我的通常才用width來設置。

經過設置flex-wrap的值爲wrap，就能夠實現和float同樣的效果了，以下：

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

文本省略截取

當被截取的內容被flex所包含的時候，會發現文本截取沒法正常生效。

具體的解釋見Stackoverflow上的回答。

更深刻的瞭解爲何即便一個flex元素和一個固定寬度的非flex元素並行的時候，flex元素內容一多就會撐開固定寬度的元素，直至佔滿，這裏有更深刻的解釋說明爲什麼會這樣：Flexbox Implied Minimum Size

結構以下：

<div class="container">
  <div class="flex">
    <div class="inner">
      <div class="title">這塊使用flex佈局的結構，會使內部的子元素沒法被正常截取</div>
    </div>
  </div>
</div>

示例結果：
https://jsfiddle.net/lyplba/r...

flex居右

這個需求特別是在弄用戶卡片的時候特別須要這樣的設置（是我這邊哈~），看以下截圖：

能夠看到關注按鈕在右側，flex佈局的好處之一就是能夠很是方便的處理居中問題，假設如今咱們把手機號下的日期去掉，按照常規的作法無法居中且還要特別設置或者用其餘方法來居中(display: table)之類的。

具體的解決方法仍是點這裏看 StackOverflow 上的(果真是面向 Google 編程~)

歸納

flex的優點在於佈局方式，任意的上中下、左中右對齊方式、位置調整、自適應那是至關的贊，能夠儘量的減小使用float、position這種不佈局方式，使他們迴歸本質，就像之前的table，關於flex佈局我的仍是要須要花時間去實戰了解。