移動web四 - 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 布局古瓤。
當(dāng)我們?yōu)楦负凶釉O(shè)為 flex 布局以后止剖，子元素的 float、clear 和 vertical-align 屬性將失效落君。
flex布局又叫伸縮布局穿香、彈性布局、伸縮盒布局绎速、彈性盒布局
采用 Flex 布局的元素皮获，稱為 Flex 容器（flexcontainer），簡稱"容器"纹冤。它的所有子元素自動成為容器成員洒宝，稱為 Flex 項(xiàng)目（flexitem）购公，簡稱"項(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 軸方向较坛，水平向下

1.JPG

注意：主軸和側(cè)軸是會變化的，就看 flex-direction 設(shè)置誰為主軸扒最，剩下的就是側(cè)軸丑勤。而我們的子元素是跟著主軸來排列的

2.JPG

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

3.JPG

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) 換行的情況（多行）强挫，在單行下是沒有效果的岔霸。

4.JPG

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

1.技術(shù)選型

方案：我們采取單獨(dú)制作移動頁面方案

技術(shù)：布局采取flex布局

2.搭建相關(guān)文件夾

5.JPG

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.模塊名字劃分

6.JPG