<meta charset="utf-8">
<article class="_2rhmJa">
移動(dòng)web開(kāi)發(fā)——flex布局
1.0傳統(tǒng)布局和flex布局對(duì)比
1.1傳統(tǒng)布局
- 兼容性好
- 布局繁瑣
- 局限性替蛉，不能再移動(dòng)端很好的布局
1.2 flex布局
- 操作方便，布局極其簡(jiǎn)單糕篇，移動(dòng)端使用比較廣泛
- pc端瀏覽器支持情況比較差
- IE11或更低版本不支持flex或僅支持部分
1.3 建議
- 如果是pc端頁(yè)面布局，還是采用傳統(tǒng)方式
- 如果是移動(dòng)端或者是不考慮兼容的pc則采用flex
2.0 flex布局原理
- flex 是 flexible Box 的縮寫(xiě)酌心，意為"彈性布局"拌消，用來(lái)為盒狀模型提供最大的靈活性，任何一個(gè)容器都可以指定為 flex 布局安券。
- 當(dāng)我們?yōu)楦负凶釉O(shè)為 flex 布局以后墩崩，子元素的 float、clear 和 vertical-align 屬性將失效侯勉。
- flex布局又叫伸縮布局 鹦筹、彈性布局 、伸縮盒布局 址貌、彈性盒布局
- 采用 Flex 布局的元素铐拐，稱(chēng)為 Flex 容器（flex
container），簡(jiǎn)稱(chēng)"容器"练对。它的所有子元素自動(dòng)成為容器成員遍蟋，稱(chēng)為 Flex 項(xiàng)目（flex
item），簡(jiǎn)稱(chēng)"項(xiàng)目"锹淌。
總結(jié)：就是通過(guò)給父盒子添加flex屬性匿值，來(lái)控制子盒子的位置和排列方式
3.0 父項(xiàng)常見(jiàn)屬性
- flex-direction：設(shè)置主軸的方向
- justify-content：設(shè)置主軸上的子元素排列方式
- flex-wrap：設(shè)置子元素是否換行
- align-content：設(shè)置側(cè)軸上的子元素的排列方式（多行）
- align-items：設(shè)置側(cè)軸上的子元素排列方式（單行）
- flex-flow：復(fù)合屬性，相當(dāng)于同時(shí)設(shè)置了 flex-direction 和 flex-wrap
3.1 flex-direction設(shè)置主軸的方向
- 在 flex 布局中赂摆，是分為主軸和側(cè)軸兩個(gè)方向挟憔，同樣的叫法有 ： 行和列钟些、x 軸和y 軸
- 默認(rèn)主軸方向就是 x 軸方向，水平向右
- 默認(rèn)側(cè)軸方向就是 y 軸方向绊谭，水平向下
- 注意： 主軸和側(cè)軸是會(huì)變化的政恍，就看 flex-direction 設(shè)置誰(shuí)為主軸，剩下的就是側(cè)軸达传。而我們的子元素是跟著主軸來(lái)排列的
3.2 justify-content 設(shè)置主軸上的子元素排列方式
?
3.3 flex-wrap設(shè)置是否換行
- 默認(rèn)情況下篙耗，項(xiàng)目都排在一條線（又稱(chēng)”軸線”）上。flex-wrap屬性定義宪赶，flex布局中默認(rèn)是不換行的宗弯。
- nowrap 不換行
- wrap 換行
3.4 align-items 設(shè)置側(cè)軸上的子元素排列方式（單行 ）
- 該屬性是控制子項(xiàng)在側(cè)軸（默認(rèn)是y軸）上的排列方式 在子項(xiàng)為單項(xiàng)（單行）的時(shí)候使用
- flex-start 從頭部開(kāi)始
- flex-end 從尾部開(kāi)始
- center 居中顯示
- stretch 拉伸
3.5 align-content 設(shè)置側(cè)軸上的子元素的排列方式（多行）
設(shè)置子項(xiàng)在側(cè)軸上的排列方式 并且只能用于子項(xiàng)出現(xiàn) 換行 的情況（多行），在單行下是沒(méi)有效果的搂妻。
3.6 align-content 和align-items區(qū)別
- align-items 適用于單行情況下蒙保， 只有上對(duì)齊、下對(duì)齊欲主、居中和 拉伸
- align-content適應(yīng)于換行（多行）的情況下（單行情況下無(wú)效）邓厕， 可以設(shè)置 上對(duì)齊、下對(duì)齊扁瓢、居中详恼、拉伸以及平均分配剩余空間等屬性值。
- 總結(jié)就是單行找align-items 多行找 align-content
3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性
flex-flow:row wrap;
4.0 flex布局子項(xiàng)常見(jiàn)屬性
- flex子項(xiàng)目占的份數(shù)
- align-self控制子項(xiàng)自己在側(cè)軸的排列方式
- order屬性定義子項(xiàng)的排列順序（前后順序）
4.1 flex 屬性
flex 屬性定義子項(xiàng)目分配剩余空間引几，用flex來(lái)表示占多少份數(shù)昧互。
.item {
flex: <number>; /* 默認(rèn)值 0 */
}
4.2 align-self控制子項(xiàng)自己在側(cè)軸上的排列方式
align-self 屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋 align-items 屬性她紫。
默認(rèn)值為 auto硅堆，表示繼承父元素的 align-items 屬性屿储，如果沒(méi)有父元素贿讹，則等同于 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)首頁(yè)案例制作
攜程網(wǎng)鏈接：http://m.ctrip.com
1.技術(shù)選型
方案：我們采取單獨(dú)制作移動(dòng)頁(yè)面方案
技術(shù)：布局采取flex布局
2.搭建相關(guān)文件夾
3.設(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">
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.模塊名字劃分
