flexbox 模型的產生主要是為給布局、對齊和容器內的空間分配提供乙個更有效的方法，即使尺寸未知或是動態改變的（flex，收縮，彈性 就是為此命名）。
flex布局使得容器能夠改變子元素的寬高來更好的填充可用空間，它既可以擴大子元素填充可用空間也可以收縮以防止溢位。
最重要的是，相對於傳統的規則布局（block是垂直排列，inline是橫向排列），flexbox布局方向是可以改變的。
flexbox並非單獨屬性而是乙個完整模型，它包含一系列屬性。一些屬性設定在容器（flex container）上而另一些是設定在子元素上（flex items）。
規則布局是基於block和inline flow directions，flex 布局則基於"flex-flow directions"。請看下面**。
簡單來說，items的布局方向沿著主軸和側軸。
display
display定義乙個flex container是行內元素還是塊級元素，取值是：
注意：這只是指定容器是inline還是block，對於子元素並沒有影響。
flex-direction
flex-wrap
flex-flow
這個屬性是flex-direction和flex-wrap的集合體，用法如下
flex-flow: ||
justify-content
這個屬性是針對主軸來講的，用來定義空間分配
align-items
這個屬性是針對側軸來說。
order
預設來說，子元素按本來**順序布局，但我們可以利用order屬性改變這個順序。
用法：.item
flex-grow
這個屬性接受乙個無單位的值定義了子元素的所佔比例。
用法：.item
flex-shrink
定義了子元素的收縮比例。
用法：.item
flex-basis
指定子元素的初始尺寸，在未經過任何flex計算時候。
用法：.item
可能不太好理解可以參考這個問答：what exactly flex-basis property sets?
flex
這個是flex-grow,flex-shrink,flex-basis集合體的簡寫，語法如下：
.item
推薦這樣使用而不要分別設定。
align-self
這個屬性是對特定某個item設定側軸對齊方式以用來覆蓋容器的align-items屬性。
待編輯由於這個屬性較新，需要考慮相容性的問題，這裡給出sass的@mixin幫助使用
本文主要引用翻譯自：a complete guide to flexbox
canvas知識體系
把canvas想象成乙個畫板 乙個繪製狀態，可模擬畫圖工具中的工具欄 繪圖元素，包括簡單的圖形，線條，複雜的組合，和 繪製模式，比如畫板中的圖形存在繪製的先後順序，而存在重疊部分，該如何顯示存在重疊的圖形，這是繪製模式要解決的問題 裁切路徑，只讓畫板的部分可見 畫素操作，操作imagedata的畫素...
android 知識體系
1.雙鎖單例，為什麼要加 volatile？volatile就牽扯到指令重排序的問題了。要理解為什麼要加volatile，首先要理解new singleton 做了什麼。new乙個物件有幾個步驟。1.看class物件是否載入，如果沒有就先載入class物件，2.分配記憶體空間，初始化例項，3.呼叫建...
Vue 知識體系
由vue官網可知，vue大致分為如下目錄 基礎在基礎中，簡單的介紹了vue在本地記事本方式開發的整個過程，學過該內容，可以通過記事本簡單的進行開發，但是僅限於單個頁面之間，且均為簡單的使用。過渡 動畫 在該單元中，詳細的講述了vue元件的動畫內容，當乙個 所有功能全部搞定之後，就該使用到該單元內容，...