felx布局意為「彈性布局」，主要用於為盒狀模型提供最大的靈活性。被廣泛的應用於移動端，pc端的響應式布局。
首先：定義盒子為flex布局：
.box設定為flex布局之後，子元素的 float clear, vertical-align 元素將會失效。
採flex布局的元素，稱為flex容器，它的所有子元素為 容器的成員。 可以調節成員之間的關係，來達到靈活布局的目的。
主要有以下6個屬性設定在容器上：
1 flex-direction： 決定主軸的方向，即專案的方向 主要屬性值有 row （水平，起點在左端），row-reverse (水平，起點在右端)
2 flex-wrap ：預設情況下 專案在一條線上，如果一條軸線排不下，如何換行。 wrap （換行 ，第一行在上方） nowrap （不換行） wrap-reverse （換行，第一行在下方）。
3 flex-flow： 該屬性是flex-direction 和 flex-wrap屬性的簡寫形式。 預設情況下為 row nowrap。
4 justify-content：該屬性定義了專案在主軸上的排列方式。 主要的屬性值有 flex-start flex-end center space-between（兩端對齊，專案之間的間隔都相等） space-around（每個專案兩側的間隔相等，因此，專案之間的間隔比專案與邊框的間隔大一倍） 等
5 align-items：該屬性定義了 專案在縱軸上的排列方式。 主要屬性有flex-start flex-end center baseline（專案的第一行的文字對齊） stretch （預設值，如果專案未設定高度或者設定為auto 將佔滿整個容器的高度）。
6 align-content：該專案定義了多根軸線的對齊方式 注意：如果只有一根軸線則不起作用。
該屬性 主要有6個值 flex-start flex-end center space-between sapce-around stretch
（軸線佔滿整個交叉軸。） 其餘屬性同上。
1 order：定義專案的排列順序 該值是乙個整數值，數值越小，排列越靠前。 預設為0。
2 flex-grow ：該屬性定義專案的放大比例，預設為0 （如果存在剩餘空間 也不放大）
如果所有專案的flex-grow屬性都為1 則他們將等分所有的剩餘空間。 如果有乙個專案的flex-grow屬性值為2 其他的為1 則前者佔據的剩餘空間將比其他專案多一倍。
3 flex-shrink ：該屬性定義了專案的縮小比例，預設為1 即如果空間不足，該專案將縮小。
eg: 如果所有專案的flex-shrink屬性都為1 ，當空間不足時，都將等比例縮小，如果乙個專案的flex-shrink屬性為0 其他為1時，當空間不足時，前者不縮小。
注意：負值對該屬性無效。
4 flex-basis： 該屬性重要：該屬性可以在分配多餘的空間之前，定義專案佔據的主軸空間，預設值為auto 。
該屬性可以設定跟width 和 height 一樣的值 eg: 250px; 則專案將佔據固定的空間。
5 flex ：該屬性是 flex-grow ,flex-shrink flex-basis 的簡寫。預設為 0 1 auto 。後兩個屬性值可選。 有兩個快捷值： auto ( 1 , 1 , auto) ；和 none （0 ，0，auto）;
6 align-self : 該屬性重要：
該屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋 align-items 屬性。預設值 為auto （表示繼承父元素的align-items屬性） 。若沒有父元素，等同於 stretch。
同樣具有6個屬性，包括 auto 其餘與align-items 屬性完全一致。
.item
Flutter必備 Flex布局完全解讀
flex布局是flutter的五虎上將之一,虎父無犬子，其子row和column也能力非凡 你有沒有被mainaxisalignment，crossaxisalignment弄得暈頭轉向,本文將助你將他們納入麾下。先看一下父子三人在flutter布局體系中的位置 多子元件布局 enum axis也就...
Flutter必備 Flex布局完全解讀
0.前言flex布局是flutter的五虎上將之一,虎父無犬子，其子row和column也能力非凡 你有沒有被mainaxisalignment，crossaxisalignment弄得暈頭轉向,本文將助你將他們納入麾下。先看一下父子三人在flutter布局體系中的位置 多子元件布局 1.flex的...
flex布局的屬性及其應用
flex布局也叫彈性布局作為前端開發中最常用布局之一，它都有那些屬性，有哪些特點，讓我們來了解一下。1.操作方便，布局簡單，移動端使用比較廣泛 2.pc端支援情況較差 3.ie低版本不支援flex 以前要想把li標籤在一行顯示時，要給li加浮動，新增浮動後可能會對下面的內容產生影響 很麻煩 當我們學...