開啟彈性盒模式： display：flex / inline-flex； inline-flex 行內彈性盒
1、設定 flex 縮放的 限定值
min-width 最小值 min-width：280px 最小寬度不能小於280px
max-width 最大值 max-width：1280px 最大寬度不能大於1280px
2、flex-direction 調整主軸方向（預設水平方向）
column 垂直排列
column-reverse 對齊方式與 column相反
row 水平排列
row-reverse 對齊方式與 row 相反
3、justify-content調整主軸對齊方式（水平對齊）
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：相當於給每個盒子新增了左右 margin 外邊距。
4、align-items調整側軸對齊（垂直對齊（單行））
stretch，預設值，讓子元素的高度拉伸適用父容器（子元素不給高度的前提下）
center，垂直居中
flex-start，上對齊
flex-end，底對齊
5、flex-wrap控制是否換行，當子盒子內容寬度多餘父盒子時如何處理
nowrap，預設值，不換行，收縮顯示在一行
wrap，拆行顯示
wrap-reverse，拆行，以相反的順序顯示
6、flex-flow 是 flex-direction、flex-wrap 的簡寫形式
flex-flow：flex-direction flex-wrap；
白話記憶：flex-flow：排列方向 換不換行；兩個中間用空格
7、align-content 堆疊（由flex-wrap 產生的獨立行）多行垂直對齊方式
stretch，預設值，盒子被拉伸以適應容器
center，居中顯示
flex-start，頭對齊
flex-end，底對齊
space-between，專案位於各行之間留有空白的容器內
space-around，專案位於各行之前，之間，之後都留有空白的容器內
例如：display：flex；
flex-flow：row wrap；
align-content：center； // 設定完 上面兩個條件，多行垂直才會起作用
必須對父元素設定自由盒屬性 display：flex，並且設定排列方式為橫向排列 flex-direction：row；
並設定換行，flex-wrap：wrap；這樣才會起作用
8、order 控制子專案的排列順序，正序方式排序，從小到大。
用整數值來定義排列順序，數值小的排在前面，可以是負值，預設值是0
order：1；
9、flex-grow：（default 0）；
說明：根據彈性盒子元素設定的擴充套件因子作為比率來分配剩餘空間
，數值定義擴充套件比率，不允許有負值
flex-grow 預設值為0，如果沒有顯示定義該屬性，是不會擁有分配剩餘空間的權利
10、flex-shrink：（default 1）；
說明：根據彈性盒子元素所設定的收縮因子作為比率來收縮空間。
flex-shrink預設值為 1，如果沒有定義該屬性，將自動按照預設值1在所有因子相加之後計算比率來進行空間收縮
11、flex-basis：| auto（default auto）；
說明：設定或檢索前行和伸縮基準值
auto，無特定寬度值，取決於其他屬性值
，長度定義寬度，不允許負值
，百分比定義寬度，不允許負值
12、復合屬性
flex：none | [ flex-grow ] | [ flex-shrink ] | [ flex-basis ] ；
預設值為 0 1 auto
flex：1，計算值為 1 1 0；
flex：auto，計算值為 1 1 auto；
flex：none，計算值為 0 0 auto；
初識flex布局
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 屬性決定主軸的方向 即專案的排列方向 它由四個屬性 row 預設值 主軸為水平方向，起點...
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...
布局（flex布局）
彈性盒模型 display flex，排列方式根據主軸方向排列。子元素超出預設不換行，而是進行壓縮 flex direction 彈性盒模型主軸方向設定 row 預設 從左到右 側軸 從上到下 row reverse 從右到左 側軸 從上到下 column 從上到下 側軸 從左到右 column r...