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布局。 - 當(dāng)我們?yōu)楦负凶釉O(shè)為
flex布局以后，子元素的float、clear和vertical-align屬性將失效。 -
flex布局又叫伸縮布局 、彈性布局 、伸縮盒布局 、彈性盒布局 - 采用
Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項(xiàng)目（flex item），簡稱"項(xiàng)目"。
總結(jié)：就是通過給父盒子添加 flex 屬性，來控制子盒子的位置和排列方式。
3.0 父項(xiàng)常見屬性
-
flex-direction：設(shè)置主軸的方向 -
justify-content：設(shè)置主軸上的子元素排列方式 -
flex-wrap：設(shè)置子元素是否換行 -
align-content：設(shè)置側(cè)軸上的子元素的排列方式（多行） -
align-items：設(shè)置側(cè)軸上的子元素排列方式（單行） -
flex-flow：復(fù)合屬性，相當(dāng)于同時設(shè)置了flex-direction和flex-wrap
3.1 flex-direction 設(shè)置主軸的方向
- 在
flex布局中，是分為主軸和側(cè)軸兩個方向，同樣的叫法有 ： 行和列、x 軸和 y 軸 - 默認(rèn)主軸方向就是 x 軸方向，水平向右
- 默認(rèn)側(cè)軸方向就是 y 軸方向，水平向下
- 注意： 主軸和側(cè)軸是會變化的，就看
flex-direction設(shè)置誰為主軸，剩下的就是側(cè)軸。而我們的子元素是跟著主軸來排列的。
3.2 justify-content 設(shè)置主軸上的子元素排列方式
3.3 flex-wrap 設(shè)置是否換行
- 默認(rèn)情況下，項(xiàng)目都排在一條線（又稱”軸線”）上。
flex-wrap屬性定義，flex布局中默認(rèn)是不換行的。 -
nowrap不換行 -
wrap換行
3.4 align-items 設(shè)置側(cè)軸上的子元素排列方式（單行 ）
- 該屬性是控制子項(xiàng)在側(cè)軸（默認(rèn)是 y 軸）上的排列方式 在子項(xiàng)為單項(xiàng)（單行）的時候使用
-
flex-start從頭部開始 -
flex-end從尾部開始 -
center居中顯示 -
stretch拉伸
3.5 align-content 設(shè)置側(cè)軸上的子元素的排列方式（多行）
設(shè)置子項(xiàng)在側(cè)軸上的排列方式 并且只能用于子項(xiàng)出現(xiàn) 換行 的情況（多行），在單行下是沒有效果的。
3.6 align-content 和 align-items 區(qū)別
-
align-items適用于單行情況下， 只有上對齊、下對齊、居中 和 拉伸。 -
align-content適應(yīng)于換行（多行）的情況下（單行情況下無效）， 可以設(shè)置 上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬性值。 - 總結(jié)就是單行找
align-items多行找align-content
3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性
flex-flow:row wrap;
4.0 flex 布局子項(xiàng)常見屬性
-
flex子項(xiàng)目占的份數(shù) -
align-self控制子項(xiàng)自己在側(cè)軸的排列方式 -
order屬性定義子項(xiàng)的排列順序（前后順序）
4.1 flex 屬性
flex 屬性定義子項(xiàng)目分配剩余空間，用flex來表示占多少份數(shù)。
.item {
flex: <number>; /* 默認(rèn)值 0 */
}
4.2 align-self 控制子項(xiàng)自己在側(cè)軸上的排列方式
align-self 屬性允許單個項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋 align-items屬性。
默認(rèn)值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。
span:nth-child(2) {
/* 設(shè)置自己在側(cè)軸上的排列方式 */
align-self: flex-end;
}
4.3 order 屬性定義項(xiàng)目的排列順序
數(shù)值越小，排列越靠前，默認(rèn)為 0。
注意：和 z-index 不一樣。
.item {
order: <number>;
}
5.0 攜程網(wǎng)首頁案例制作
攜程網(wǎng)鏈接：http://m.ctrip.com
- 技術(shù)選型
方案：我們采取單獨(dú)制作移動頁面方案
技術(shù)：布局采取 flex 布局
- 搭建相關(guān)文件夾
- 設(shè)置視口標(biāo)簽以及引入初始化樣式
<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">
- 常用初始化樣式
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;
}
- 模塊名字劃分
