傳統布局與flex布局
傳統布局：相容性好；布局繁瑣；侷限性，不能在移動端很好的布局。
flex 彈性布局：操作方便，布局極為簡單，移動端應用很廣泛；pc 端瀏覽器支援情況較差；ie 11或更低版本，不支援或僅部分支援。
布局原理
flex 是flexible box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex 布局。
flex布局父項常見屬性
flex-direction：設定主軸的方向（即專案的排列方向）
（預設主軸方向就是x軸方向，水平向右；預設側軸方向就是y軸方向，水平向下）
屬性值說明
row預設值從左到右
row-reverse
從右到左(子元素排列順序顛倒)
column
從上到下
column-reverse
從下到上
justify-content：設定主軸上的子元素排列方式
屬性值說明
flex-start
預設值從頭部開始（如果主軸是x軸，則從左到右）
flex-end
從尾部開始排列
center
在主軸居中對齊（如果主軸是x軸則水平居中）
space-around
平分剩餘空間
space-between
先兩邊貼邊再平分剩餘空間
flex-wrap：設定子元素是否換行
屬性值說明
nowrap
預設值，不換行
wrap
換行
align-items：設定側軸上的子元素排列方式（單行）
屬性值說明
flex-start
預設值從上到下
flex-end
從下到上
center
擠在一起居中（垂直居中）
stretch
拉伸（子盒子不要給高度，拉到和父盒子一樣高）
align-content：設定側軸上的子元素的排列方式（多行）
設定子項在側軸上的排列方式並且只能用於子項出現換行的情況（多行），在單行下是沒有效果的。
屬性值說明
flex-start
預設值在側軸的頭部開始排列
flex-end
在側軸的尾部開始排列
center
在側軸中間顯示
space-around
子項在側軸平分剩餘空間
space-between
子項在側軸先分布在兩頭，再平分剩餘空間
stretch
設定子項元素高度平分父元素高度
align-content和align-items 區別
flex-flow：復合屬性，相當於同時設定了flex-direction 和flex-wrap
flex-flow: row wrap;flex布局子項常見屬性
flex屬性
flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。
.itemspan:nth-child(2)數值越小，排列越靠前，預設為0。(設為-1向前排，1向後)
注意：和z-index 不一樣。
.item移動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...
移動Web開發 flex布局
1.相容性好 2.布局繁瑣 3.侷限性，不能在移動端很好地布局 1.操作方便，布局極 為簡單，移動端應用很廣泛 2.pc端瀏覽器支援情況較差 3.ie11或更低版本，不支援或僅支援部分 1.如果是pc端介面布局，還是使用傳統布局 2.如果是移動端或者不考慮相容性問題的pc端介面布局，我們還是使用fl...