用來為盒裝模型提供最大的靈活性。任何乙個容器都可以指定為flex布局
（1）flex-direction：設定主軸的方向
屬性值說明
row從左到右（預設值）
row-reverse
從右到左
column
從上到下
column-reverse
從下到上
（2）justify-content：設定主軸上的子元素排列方式
屬性值說明
flex-start
從頭部開始，如果主軸是x軸，則從左到右（預設值）
flex-end
從尾部開始排列
center
在主軸居中對齊（如果主軸是x軸則水平居中）
space-around
平分剩餘空間
space-between
先兩邊貼再平分剩餘空間
（3）flex-wrap：設定子元素是否換行
屬性值說明
nowrap
不換行（預設值）
wrap
換行注：flex布局中，預設的子元素不換行；若裝不開，會縮小子元素的寬度，放到父元素裡面
（4）align-content：設定側軸上的子元素的排列方式（多行）
屬性值說明
flex-start
在側軸的頭部開始排列（預設值）
flex-end
在側軸的尾部開始排列
center
在側軸的中間顯示
sapce-around
子項在側軸平分剩餘空間
space-between
子項在側軸先分布在兩頭，再平分剩餘空間
stretch
設定子項元素高度平分父元素高度
注：在單行下，該屬性不起作用
（5）align-items：設定側軸上的子元素的排列方式（單行）
屬性值說明
flex-start
從上到下
flex-end
從下到上
center
垂直居中
stretch
拉伸，盒子不需要給高度（預設值）
（6）flex-flow：復合屬性,相當於同時設定了flex-direction和flex-wrap
flex-flow
: row wrap;
/*主軸x,可換行*/
.item
（3）order：定義專案的排列順序
移動WEB開發之flex布局
flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為 flex 布局。伸縮布局 彈性布局 伸縮盒布局 彈性盒布局 flex布局 注意 使用這個屬性之前一定要確定好主軸是哪個 flex wrap屬性定義，flex布局中預設是不換行的。...
移動web開發 flex布局
container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 總結 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex flow row wrap flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。item...
移動web開發 flex布局
container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 總結 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex flow row wrap flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。item...