H5的第二天
移動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來表示占多少份數。
- 應用：
- 圣杯布局
- 子項按比例分配
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 模塊名字劃分
總結
