flex-flow
3. flex布局子項常見屬性
當我們為父盒子設為flex布局以後，子元素的float、clear和vertical-align都會失效
伸縮布局 = 彈性布局 = 伸縮盒布局 = 彈性盒布局 = flex布局
總結：就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式
flex-direction:設定主軸的方向
justify-content:設定主軸上的子元素排列方式
flex-wrap:設定子元素是否換行
align-content:設定側軸上子元素的排列方式(多行)
align-item:設定側軸上子元素的排列方式(單行)
flex-flow:復合屬性，相當於同時設定了flex-direction和flex-wrap
主軸(行)和側軸(列)
預設主軸方向就是x軸方向，水平向右，側軸方向就是y軸方向，水平向下
flex-direction: row （從左到右）
屬性值row: 從左到右
row-reverse: 從右向左 (翻轉)
column: 從上到下(主軸為y軸)
column-reverse: 從下到上
justify-content設定主軸上子元素的排列方式
屬性值：
flex-start: （預設）從頭部開始，如果主軸是x軸，則從左到右
flex-end: 從尾部開始排列
center: 在主軸居中對齊(如果是x軸則水平居中，y軸則垂直居中)
space-around: 平分剩餘空間
space-between: 先貼邊，再平分剩餘空間(重要)
flex-wrap設定子元素是否換行
預設情況下，專案都排在一條線(軸線)上，flex-wrap屬性定義：flex布局中預設是不換行的
屬性值：
nowrap: 預設值，不換行
wrap: 換行
設定側軸上子元素的排列方式
align-items (單行)
屬性值：
flex-start: 預設值，從上到下
flex-end: 從下到上
center: 擠在一起居中(垂直居中)
stretch: 拉伸
align-content (多行)
屬性值：
flex-start: 預設值,在側軸的頭部開始排列
flex-end: 從側軸的尾部開始排列
center: 在側軸中間顯示
space-around: 子項在側軸平分剩餘的空間
space-between: 子項在側軸先分布在兩頭，再平分剩餘的空間
stretch: 設定子元素高度平分父元素高度
flex-flow
flex: 子項佔的份數
align-self: 控制子項自己在側軸的排列方式
order: 定義子項的排列順序
align-self 控制子項自己在側軸上的排列方式
order屬性定義專案的排列順序
div span:nth-child(3)
div span:nth-child(2)
移動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...