移动开发—详解flex布局之携程网首页案例制作

学习内容

一、flex的布局原理

二、flex布局父项常见的属性

三、flex布局子项常见的属性

四、携程网首页案例制作

一、flex的布局原理

总结flex布局的原理：就是通过给父盒子添加flex属性，来控制盒子的位置和排列顺序

二、flex布局父项常见的属性

（一）、flex-direction设置主轴的方向

主轴与侧轴

在flex中，是分为主轴和侧轴两个方向：同样的叫法有：行和列、x轴和y轴
默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下

flex-direction属性决定主轴的方向（即项目排列的方向）

注意：主轴和侧轴是会变化的，看flex-direction设置谁为准，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的

（二）、justify-content设置主轴上的子元素的排列方式
注意：使用这个属性之前一定要确定哪个是主轴

（三）、flex-wrap设置子元素是否换行
默认情况下，项目都排在一条线上，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面

（四）、align-items设置侧轴上的子元素的排列方式（单行）
该属性是控制子项在侧轴（默认是y）上的排列方式在子项为单向的时候使用

（五）、align-content设置侧轴上的子元素的排列方式

设置子项在侧轴的排列方式并且只能用于子项出现换行的情况（多行）在单行下是没有效果的

（六）、align-content和align-items的区别

（七）、flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合型

（八）、总结

三、flex布局子项常见的属性

（一）、flex子项目占的份数
flex属性定义子项目分配剩余空间，用flex来表示占多少份数

（二）、align-self控制子项自己在侧轴的排列方式

（三）、order属性定义子项的排列顺序（前后顺序）

数值越小，排列越靠前，默认值为0
注意：和 z-index不一样

四、携程网首页案例制作

一、技术选型

方案：采用单独制作移动页面的方案

技术：布局采用flex布局

二、携程网制作

部分代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"><title>携程在手，说走就走</title><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css">
</head><body><!-- 搜索模块 --><div class="search-index"><div class="search"> 搜索：目的地/酒店/景点/航班号</div><a href="#" class="user">我 的</a></div><!-- 焦点图模块 --><div class="focus"><img src="upload/focus.jpg" alt=""></div><!-- 局部导航栏 --><ul class="local-nav"><li><a href="#" title="景点玩乐"><span class="local-nav-icon1"></span><span>景点 玩乐</span></a></li><li><a href="#" title="周边游"><span class="local-nav-icon-icon2"></span><span>周边游</span></a></li><li><a href="#" title="美食林"><span class="local-nav-icon-icon3"></span><span>美食林</span></a></li><li><a href="#" title="一日游"><span class="local-nav-icon-icon4"></span><span>一日游</span></a></li><li><a href="#" title="当地攻略"><span class="local-nav-icon-icon5"></span><span>当地攻略</span></a></li></ul><!-- 主导航栏 --><nav><div class="nav-common"><div class="nav-items"><a href="#">海外酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div><div class="nav-items"><a href="#">团购</a><a href="#">民用客栈</a></div></div><div class="nav-common"><div class="nav-items"><a href="#">机票</a></div><div class="nav-items"><a href="#">火车票</a><a href="#">特价机票</a></div><div class="nav-items"><a href="#">汽车票 船票</a><a href="#">专车 租车</a></div></div><div class="nav-common"><div class="nav-items"><a href="#">旅游</a></div><div class="nav-items"><a href="#">门票</a><a href="#">目的地攻略</a></div><div class="nav-items"><a href="#">游轮旅行</a><a href="#">定制旅行</a></div></div></nav><!-- 侧部分 --><ul class="subnav-entry"><li><a href="#"><span class="subnav-entry-icon-icon1"></span><span>WiFi电话卡</span></a></li><li><a href="#"><span class="subnav-entry-icon-icon2"></span><span>保险签证</span></a></li><li><a href="#"><span class="subnav-entry-icon-icon3"></span><span>外币兑换</span></a></li><li><a href="#"><span class="subnav-entry-icon-icon4"></span><span>购物</span></a></li><li><a href="#"><span class="subnav-entry-icon-icon5"></span><span>当地导向</span></a></li><li><a href="#"><span class="subnav-entry-icon-icon6"></span><span>自由行</span></a></li><li><a href="#"><span class="subnav-entry-icon--icon7"></span><span>境外玩乐</span></a></li><li><a href="#"><span class="subnav-entry-icon--icon8"></span><span>礼品卡</span></a></li><li><a href="#"><span class="subnav-entry-icon--icon9"></span><span>信用卡</span></a></li><li><a href="#"><span class="subnav-entry-icon-icon10"></span><span>更多</span></a></li></ul><!--  销售模块--><div class="sales-box"><div class="sales-hd"><h2>热门活动</h2><a href="#" class="more">获取更多福利</a></div><div class="sales-bd"><div class="row"><a href="#"><img src="upload/pic1.jpg" alt=""></a><a href="#"><img src="upload/pic2.jpg" alt=""></a></div><div class="row"><a href="#"><img src="upload/pic3.jpg" alt=""></a><a href="#"><img src="upload/pic4.jpg" alt=""></a></div><div class="row"><a href="#"><img src="upload/pic5.jpg" alt=""></a><a href="#"><img src="upload/pic6.jpg" alt=""></a></div></div></body></html>