移動web開發——flex布局

目標

• 了解flex布局的優缺點及原理
• 能夠說出flex布局原理、使用語法、特點（重點）
• 能夠使用flex布局常用屬性（重點）
• 能夠獨立完成攜程移動端首頁

1.0 傳統布局和flex布局對比

1.1傳統布局

• 兼容性好
• 布局繁瑣

1.2 flex布局

• 操作方便，布局極其簡單
• 移動端webkit內核都支持該屬性
• pc端瀏覽器支持情況比較差、IE11或更低版本不支持flex或僅支持部分

1.3 建議

• 如果是pc端頁面布局，還是采用傳統方式
• 如果是移動端或者是不考慮兼容的pc則采用flex

演示：

2.0 flex布局（原理、特點、使用語法）

• 名稱：flex 是 flexible Box 的縮寫，意為"彈性布局"，把布局分為父項和子項
  • 面試叫法：flex布局又叫伸縮 布局 、彈性布局 、伸縮盒布局 、彈性盒布局 ；
• 原理：
  • 采用 Flex 布局的元素，稱為 Flex 容器（flexcontainer），父級簡稱"容器"。
  • 它的所有子元素自動成為容器成員，稱為 Flex 項目（flexitem），簡稱"項目"。
    

使用語法：flex布局入口，加在父項上；

display:flex;

• 特點：
  • 任何一個標簽都可以指定使用 flex 布局。
  • 當為父盒子設為 flex 布局以后，子元素的 float、clear 和 vertical-align 屬性將失效。
  • 使用思想上和傳統盒子完全不同，不要再想子元素是塊級元素、行內元素等，

總結：就是通過給父盒子添加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 設置側軸上的子元素的排列方式（多行）

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

• strech: 默認值 設置多行子元素平均分配父元素
• flex-start: 在側軸的頭部開始排列
• flex-end: 在側軸尾部開始平均分布
• center: 在側軸中間顯示
• space-around: 子項在側軸上平均分布；
• space-between: 子項在側軸上先兩頭分布，再把平分剩余空間

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;

重點案例 ：nav導航

分析：

• 整體：
  • 確認主軸，水平向右；
• 單獨一個元素：
  • 整體單個元素：flex布局；
  • 確認主軸：Y軸，列；
  • 側軸對齊：居中；

4.0 flex布局子項常見屬性

• flex子項目占的份數
• align-self控制子項自己在側軸的排列方式
• order屬性定義子項的排列順序（前后順序）

4.1 flex 屬性(重要)

• flex 屬性定義子項目分配剩余空間，用flex來表示占多少份數。
• 應用：
  • 圣杯布局
  • 子項按比例分配

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

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

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

注意：和 z-index 不一樣。

.item {

5.0 攜程網首頁案例制作

攜程網鏈接：添加鏈接描述

5.1技術選型

方案：我們采取單獨制作移動頁面方案

技術：布局采取flex布局

5.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">

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