移動WEB開發-flex佈局

移動web開發——flex佈局

1.0傳統佈局和flex佈局對比

1.1傳統佈局

• 兼容性好
• 佈局繁瑣
• 侷限性，不能再移動端很好的佈局

1.2 flex佈局

• 操做方便，佈局極其簡單，移動端使用比較普遍
• pc端瀏覽器支持狀況比較差
• IE11或更低版本不支持flex或僅支持部分

1.3 建議

• 若是是pc端頁面佈局，仍是採用傳統方式
• 若是是移動端或者是不考慮兼容的pc則採用flex

2.0 flex佈局原理

• flex 是 flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性，任何一個容器均可以指定爲 flex 佈局。
• 當咱們爲父盒子設爲 flex 佈局之後，子元素的 float、clear 和 vertical-align 屬性將失效。
• flex佈局又叫伸縮佈局 、彈性佈局 、伸縮盒佈局 、彈性盒佈局
• 採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），簡稱"容器"。它的全部子元素自動成爲容器成員，稱爲 Flex 項目（flex item），簡稱"項目"。

總結：就是經過給父盒子添加flex屬性，來控制子盒子的位置和排列方式

3.0 父項常見屬性

• flex-direction：設置主軸的方向
• justify-content：設置主軸上的子元素排列方式
• flex-wrap：設置子元素是否換行
• align-content：設置側軸上的子元素的排列方式（多行）
• align-items：設置側軸上的子元素排列方式（單行）
• flex-flow：複合屬性，至關於同時設置了 flex-direction 和 flex-wrap

3.1 flex-direction設置主軸的方向

• 在 flex 佈局中，是分爲主軸和側軸兩個方向，一樣的叫法有 ： 行和列、x 軸和y 軸
• 默認主軸方向就是 x 軸方向，水平向右
• 默認側軸方向就是 y 軸方向，水平向下

• 注意： 主軸和側軸是會變化的，就看 flex-direction 設置誰爲主軸，剩下的就是側軸。而咱們的子元素是跟着主軸來排列的

3.2 justify-content 設置主軸上的子元素排列方式

3.3 flex-wrap設置是否換行

• 默認狀況下，項目都排在一條線（又稱」軸線」）上。flex-wrap屬性定義，flex佈局中默認是不換行的。
• nowrap 不換行
• wrap 換行

3.4 align-items 設置側軸上的子元素排列方式（單行 ）

• 該屬性是控制子項在側軸（默認是y軸）上的排列方式 在子項爲單項（單行）的時候使用
• flex-start 從頭部開始
• flex-end 從尾部開始
• center 居中顯示
• stretch 拉伸

3.5 align-content 設置側軸上的子元素的排列方式（多行）

設置子項在側軸上的排列方式 而且只能用於子項出現 換行 的狀況（多行），在單行下是沒有效果的。

3.6 align-content 和align-items區別

• align-items 適用於單行狀況下， 只有上對齊、下對齊、居中和 拉伸
• align-content適應於換行（多行）的狀況下（單行狀況下無效）， 能夠設置 上對齊、下對齊、居中、拉伸以及平均分配剩餘空間等屬性值。
• 總結就是單行找align-items 多行找 align-content

3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的複合屬性

flex-flow:row wrap;

4.0 flex佈局子項常見屬性

• flex子項目佔的份數
• align-self控制子項本身在側軸的排列方式
• order屬性定義子項的排列順序（先後順序）

4.1 flex 屬性

flex 屬性定義子項目分配剩餘空間，用flex來表示佔多少份數。

.item {  
 flex: <number>; /\* 默認值 0 \*/  
}

4.2 align-self控制子項本身在側軸上的排列方式

align-self 屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋 align-items 屬性。

默認值爲 auto，表示繼承父元素的 align-items 屬性，若是沒有父元素，則等同於 stretch。

span:nth-child(2) {  
 /\* 設置本身在側軸上的排列方式 \*/  
 align-self: flex-end;  
}

4.3 order 屬性定義項目的排列順序

數值越小，排列越靠前，默認爲0。

注意：和 z-index 不同。

.item {  
 order: <number>;  
}

參考1：阮一峯:flex佈局-語法篇：http://www.ruanyifeng.com/blo...
參考2：阮一峯：Flex 佈局教程-實例篇
http://www.ruanyifeng.com/blo...