<meta charset="utf-8">
<article class="_2rhmJa">
移動web開發(fā)——flex布局
1.0傳統(tǒng)布局和flex布局對比
1.1傳統(tǒng)布局
- 兼容性好
- 布局繁瑣
- 局限性，不能再移動端很好的布局
1.2 flex布局
- 操作方便，布局極其簡單，移動端使用比較廣泛
- pc端瀏覽器支持情況比較差
- IE11或更低版本不支持flex或僅支持部分
1.3 建議
- 如果是pc端頁面布局，還是采用傳統(tǒng)方式
- 如果是移動端或者是不考慮兼容的pc則采用flex
2.0 flex布局原理
- flex 是 flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 flex 布局。
- 當我們?yōu)楦负凶釉O為 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區(qū)別
- 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>;
}
5.0 攜程網首頁案例制作
攜程網鏈接：http://m.ctrip.com
1.技術選型
方案：我們采取單獨制作移動頁面方案
技術：布局采取flex布局
2.搭建相關文件夾
3.設置視口標簽以及引入初始化樣式
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
4.常用初始化樣式
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
5.模塊名字劃分
