簡介：大三學生黨一枚！主攻Android開發，對於Web和後端均有了解。
語錄：取乎其上，得乎其中，取乎其中，得乎其下，以頂級態度寫好一篇的博客。
衆所周知，前端開發用的原始CSS佈局是盒子模型，但是盒子模型在有些情況下並不好用，比如要實現垂直居中的效果，就比較難！正是由於此原因，現在主流的佈局都改爲Flex佈局，絕大部分瀏覽器都已經支持Flex佈局了，ReactNative已經實現了大部分的Flex佈局，這樣使得開發UI變得簡單了，可以在IOS和Android端使用同一套UI!趕緊學起來呀！
Flex佈局基礎知識
如果你還沒有理解什麼是Flex佈局，那如果對Android瞭解的同學應該知道LinearLayout和RelativeLayout這兩種佈局，規定了控件在該佈局內的排列，以更好的實現優美的UI界面。Flex佈局和這兩種佈局的作用是一樣的，也是規定了內部的控件是如何排列的。那麼他究竟是如何控制元素排列的位置呢？別急，下面我們一層一層來探究！爲了方便大家理解，我們拿Android佈局中的LinearLayout給大家進行對比！
Flex佈局所使用的到的屬性，簡單分爲以下兩類：
- 1.規定子控件的排列規則
- 2.決定組件自身的顯示規則
可能這樣並不容易理解，舉個例子：
LinearLayout中，我們使用orientation來規定內部子組件的排列方向，如TextView，ImageView的排列方向等，所以說orientation這個屬性是用來規定子控件的排列規則的屬性，他屬於上面的第一類！
子組件自身也有屬性，比如TextView內的文字想要實現居中怎麼辦？
這時候在Linearlayout中的屬性，就沒有作用了，要使用gravity這一組件自身的屬性來進行設置，這屬於第二類，決定組件自身的顯示規則，希望你們能理解！
接下來就分別介紹這兩類屬性。
1.1規定子控件的排列規則
1.1.1 flex-direction VS orientation
在Flex佈局中，使用flexDirection屬性來規定組件排列的方向，就像orientation一樣，有水平排列和垂直排列，但是flexDirection的值有四種！
row-reverse
按照水平方向排列，但是從右向左排列
column
column表示垂直排列，和orientation：vertical的作用的相同。規定組件從上到下進行排列。
垂直方向排列，但是從下至上
1.1.2 flex-wrap
這個屬性的作用：當一行排列不下的時候，是否允許換行
該值表明，即使一行顯示不小，也不允許換行，導致後面的元素不可見
wrap
該值表示，當一行排列不下的時候，會自動和換行。
wrap-reverse
該值表示，當無法顯示完全時，會換行且第一行在下方
1.1.3 justify-Content VS layout-gravity
justifyContent屬性和layout-gravity屬性類似，都是設置組件在容器中的對齊方式。layout-gravity可以設置center,left,right,justifyContent也可以設置。具體如下圖所示：
flex-start:向左對齊
flex-end:向右對齊
center:居中對齊
space-between:兩端對齊，控件之間的間隔相同
space-around:每個項目兩側的間距相等
1.1.4 align-Items
該屬性規定了在垂直方向上怎麼排列。看圖！
flex-start:與上方對齊
flex-end:與下方對齊
center:垂直居中
stretch:如果沒有設置默認高度就會佔滿整個父容器的高度
align-content
該屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線佔滿整個交叉軸。
1.2規定控件自身的的顯示規則
- order:定義組件的排列順序，數據越小，排列越靠前
- flex-grow:定義組件的放大比例，默認爲0，即存在剩餘控件也不放大
- flex-shrink:屬性定義了項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小。
- align-self:align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
這幾個屬性都是控制控件顯示的屬性，用以輔助更好的設計佈局和UI！！
最後，一個IT交流與資源分享的羣要推薦給您，讓小白更好，更快的走上IT之路！謝謝您的閱讀。
別再猶豫，一起來學習！
