flex伸縮佈局知識點總結

前言：

簡單來講flex伸縮佈局是咱們移動端佈局比較經常使用的一種方式，移動端佈局還有流式佈局，less+rem+媒體查詢佈局這些都是單獨製做移動端頁面的一些佈局方式。

這裏主要介紹一下flex伸縮佈局，由於它有不少優勢，好比操做方便，佈局很是簡單，在移動端運用很普遍。

什麼是flex伸縮佈局？

flex 是 flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性，任何一個容器均可以 指定爲 flex 佈局。

用大白話來講就是就是經過給父盒子添加flex屬性，來控制子盒 子的位置和排列方式

注意點：當咱們爲父盒子設爲 flex 佈局之後，子元素的 float、clear 和 vertical-align 屬性將失效。

flex佈局父項常見屬性：

如下6個屬性都是對父元素設置的：

flex-direction 設置主軸的方向

flex-wrap 設置子元素是否換行

justify-content 設置主軸上子元素的排列方式

align-items設置側軸上子元素的排列方式（單行文本）

align-content設置側軸上子元素的排列方式（多行文本）

flex佈局子項常見屬性：

flex flex 屬性定義子項目分配剩餘空間，用flex來表示佔多少份數。

align-self  控制子項本身在側軸上的排列方式

order 屬性定義項目的排列順序 這裏和z-index不一樣，z-index是調整重疊定位元素的堆疊順序，堆羅漢的效果。只對相對定位，固定定位，絕對定位有效果，對標準流（靜態定位），浮動都無次屬性。