一、传统布局与flex弹性布局的对比
传统布局
1.兼容性好
2.布局繁琐（要考虑浮动和清除浮动等问题）
3.局限性，不能在移动端很好的布局
flex弹性布局
1.操作方便，布局简单，移动端应用广泛
2.PC端浏览器支持情况较差（IE 11或更低版本不支持或仅部分支持）
若做PC端页面布局：使用传统布局
若做移动端页面布局或不考虑兼容性问题：使用flex页面布局
二、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">
<title>Document</title>
<style>
div{
display: flex; /* 只需要添加一个display属性，就可以实现让span行级元素有高度，不需要再使用清除浮动了 */
width: 80%;
height: 300px;
background-color: pink;
justify-content: space-around; /* 在弹性盒对象的 元素中的各项周围留有空白，且是自适应的，随着页面的缩小，留白的距离也会变小 */
}
div span{
/*width: 150px;*/
flex:1; /* 如果将span行级元素的宽度去掉，再加一个flex属性，就可以实现平均分配 */
height: 100px;
background-color: powderblue;
margin-right: 5px;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
三、flex布局原理
flex（flexible Box）：用盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
flex容器（flex container）：采用flex布局的元素（父元素）
flex项目（flex item）：子元素自动成为容器成员，子项目可以横向排列（默认是横向），也可以纵向排列
当为父盒子设为flex布局后，子元素的float（浮动）、clear（清除浮动）和vertical-align（元素的垂直对齐方式）属性都会失效
flex布局=伸缩布局=伸缩盒布局=弹性布局=弹性盒布局
display：flex 容器添加弹性布局后，显示为块级元素
display：inline-flex 容器添加弹性布局后，显示为行级元素
给父容器添加display属性，可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式
是容器内容（子元素）采用弹性布局，而容器自身（父容器）在文档流中的定位方式依然遵循常规文档流
四、flex布局父项常见属性
1.flex-direction 主轴的方向
主轴与侧轴是什么？元素是跟着主轴来排列的
主轴 - 行 - x轴 （默认），水平向右
侧轴 - 列 - y轴 （默认），水平向下
| 属性 | 功能 |
|---|---|
| row | 从左到右（默认），设置主轴为行（x轴） |
| row-reverse | 从右往左 |
| column | 从上到下，设置主轴为列（y轴） |
| column-reverse | 从下到上 |
2.justify-content 主轴上子元素排列方式
注意：使用这个属性之前一定要确定好主轴是哪一个
| 属性 | 功能 |
|---|---|
| flex-start | 默认，从头部开始，如果主轴是x轴，则从左到右（子元素贴着左边或上边） |
| flex-end | 从尾部开始排列（子元素贴着右边或下边） |
| center | 从主轴居中对齐（如果主轴是x轴，则水平对齐，如果主轴是y轴，则垂直对齐） |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间 |
3.flex-wrap 子元素是否换行
默认所有子元素不换行，排列在主轴线上，如果一行摆放不下，就会缩子元素的宽度来保证元素在同一行
| 属性 | 功能 |
|---|---|
| nowrap | 默认，不换行 |
| wrap | 换行 |
4.align-items 侧轴上子元素的排列方式（单行）
是沿着侧轴（默认y轴，因为默认主轴是x轴）来设置的排列方式，且只适用于子元素为单行时使用
实现居中：主轴 （水平居中） justify-content：center，侧轴 （垂直居中） align-item：center
| 属性 | 功能 |
|---|---|
| flex-start | 默认，从上到下 |
| flex-end | 从下到上 |
| center | 挤到一起居中（垂直居中） |
| stretch | 拉伸（沿着侧轴拉伸，需要将子元素宽度去掉，拉伸高度和父元素高度一样） |
5.align-content 侧轴上的子元素排列方式（多行）
设置子项在侧轴上的排列方式，并且只能用于子项换行情况（多行），在单行下没有效果
| 属性 | 功能 |
|---|---|
| flex-start | 默认，在侧轴头部开始排列 |
| flex-end | 侧轴尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先两边贴边，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
6.flex-flow 复合属性
相当于同时设置了 flex-direction 与 flex-wrap
五、flex布局子项常见属性
1.flex子项目占的份数
定义子项目分配剩余空间（去掉有固定宽度的子元素就是剩余可分配的空间），用flex来表示占多数份数
| 属性 | 功能 |
|---|---|
| flex: 1 | 将剩余空间分成一份，全部给设置此属性的子元素（ 左右边各占100px，剩余是80%的宽度-200px） |
<!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">
<title>Document</title>
<style>
section{
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
section div:nth-child(1){
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2){
flex: 1; /* 左右边各占100px，剩余是80%的宽度-200px，将其分成一份，全部给2号div */
background-color: green;
}
section div:nth-child(3){
width: 100px;
height: 150px;
background-color: blue;
}
p{
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span{
flex: 1;
}
p span:nth-child(2){
flex: 2;
background-color: purple;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body>
</html>
2.align-self 子项目自己在侧轴的排列方式
某一个子元素相对于侧轴的排列方式
允许某个子项目与其他项目有不一样的对齐方式，可以覆盖align-items属性，默认值为auto，表示继承父元素align-items属性，如果没有父元素，等同于stretch
3.order 子项目的排列顺序（前后顺序）
数值越小，排列越靠前，默认为0
注意：和z-index不一样，order是控制左右的效果，z-index控制的是层叠的效果
# 默认第一个子元素的order=0，把第二个子元素的order设置为-1，就可以排列到第一个子元素的前面
div span:nth-child(2){
order: -1;
}
六、携程网移动端首页案例
1.技术选型
移动端首页：携程网
方案：采取单独制作移动页面方案
技术：布局采取flex布局（宽度是自适应的，高度定死的）
2.常用flex布局的思路
3.搭建项目并引入初始化样式
4.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 引入初始化样式 -->
<link rel="stylesheet" href="./css/normalize.css"></link>
<link rel="stylesheet" href="./css/index.css"></link>
<!-- 引入elementui样式库 -->
<link rel="stylesheet" href="./elementui/node_modules/element-ui/lib/theme-chalk/index.css">
<!-- 引入elementui组件库 -->
<script src="./elementui/node_modules/element-ui/lib/index.js"></script>
<title>携程在手，说走就走</title>
</head>
<body>
<!-- 搜索模块search-index -->
<div class="search-index">
<!-- 搜索框，自适应 -->
<div class="search">
<i class="el-icon-search"></i>
搜索：目的地/酒店/景点/航班号
</div>
<!-- 我的，固定大小 -->
<a href="#" class="my">
<i class="el-icon-user-solid"></i>
<!-- 在index.css使用.my::after的content: "我 的";添加文字内容 -->
</a>
</div>
<!-- 焦点图模块focus -->
<div class="focus">
<img src="upload/focus.png" alt="">
</div>
<!-- 局部导航栏模块local-nav -->
<div class="locl-nav-div">
<ul class="local-nav">
<!-- 使用标准流，五个小li会竖着排列，父级使用弹性布局 -->
<li>
<a href="#" title="酒店"> <!-- title="酒店"是鼠标移动到上面时的一个提示信息 -->
<span class="local-nav-icon-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>
<ul class="local-nav">
<li>
<a href="#" title="民宿/客栈">
<span class="local-nav-icon-icon6"></span>
<span>民宿/客栈</span>
</a>
</li>
<li>
<a href="#" title="接送机/包车">
<span class="local-nav-icon-icon7"></span>
<span>接送机/包车</span>
</a>
</li>
<li>
<a href="#" title="车票/船票">
<span class="local-nav-icon-icon8"></span>
<span>车票/船票</span>
</a>
</li>
<li>
<a href="#" title="门票/活动">
<span class="local-nav-icon-icon9"></span>
<span>门票/活动</span>
</a>
</li>
<li>
<a href="#" title="美食">
<span class="local-nav-icon-icon10"></span>
<span>美食</span>
</a>
</li>
</ul>
<ul class="local-nav">
<li>
<a href="#" title="特价/爆款">
<span class="local-nav-icon-icon11"></span>
<span>特价/爆款</span>
</a>
</li>
<li>
<a href="#" title="航班助手">
<span class="local-nav-icon-icon12"></span>
<span>航班助手</span>
</a>
</li>
<li>
<a href="#" title="租车">
<span class="local-nav-icon-icon13"></span>
<span>租车</span>
</a>
</li>
<li>
<a href="#" title="周边游">
<span class="local-nav-icon-icon14"></span>
<span>周边游</span>
</a>
</li>
<li>
<a href="#" title="购物/免税">
<span class="local-nav-icon-icon15"></span>
<span>购物/免税</span>
</a>
</li>
</ul>
</div>
</body>
</html>
5.index.css
/* https://m.ctrip.com/html5/ 是携程移动端原页面 */
body {
max-width: 540px; /* 查看源码最大宽度是540px */
min-width: 320px; /* 习惯性约定，最小宽度320px */
margin: 0 auto;
font:normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei; /*正常字体，1.5倍行距，字体设置 */
color: #000; /* 字体颜色黑色*/
background: #f2f2f2; /* 白色背景 */
overflow-x: hidden; /* 不出现水平滚动条，如果溢出元素的内容区域的话,裁剪 div 元素中内容的左/右边缘 */
-webkit-tap-highlight-color: transparent; /* 设置为透明，防止点击某些元素后背景高亮 */
}
/* 取消所有a的下划线 */
a{
text-decoration: none;
}
/* 将所有的小li去掉小圆点 */
ul{
list-style: none;
margin: 0;
padding: 0;
}
/* 搜索模块 */
.search-index{
/* 搜索模块采用固定定位,固定定位和父级没有关系,以屏幕为准 */
position: fixed;
top: 0;
/* 如果不给left值，也可以实现在页面中间的布局 */
/* 完整的居中写法 */
/* 距离左边50% */
left: 50%;
/* transform:translate(-50%,-50%)，位移的属性，translateX在x轴方向上进行移动，反之translateY实在y轴方向，而translate括号里的两个参数是先x后y的 */
transform: translateX(-50%);
/* 兼容老版浏览器 */
-webkit-transform: translateX(-50%);
/* 固定定位和父级没有关系，它以屏幕为准，所以需要设置最大最小宽度 */
width: 100%;
min-width: 320px;
max-width: 540px;
/* 高度固定 */
height: 44px;
/* background-color: pink; */
/* 设置为弹性布局,右边固定固定宽度，左边为剩余部分全部为搜索框部分（自适应） */
display: flex;
}
/* 搜索框 */
.search{
flex: 1; /* 弹性布局，我的固定宽度，剩余空间都分给搜索框 */
height: 26px;
border: 1px solid #ccc;
margin: 7px 10px;
border-radius: 5px;
color: rgb(54, 50, 50);
font-size: 14px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2); /*搜索框的阴影 */
}
/* 在搜索框里面加一个搜索的精灵图或者element-ui的组件图标 */
.search i{
font-size: 16px; /* 设置组件图标的大小 */
color: rgb(54, 50, 50);
margin: 5px 5px;
}
/* 我的 */
.my{
width: 44px;
height: 44px;
font-size: 12px;
color: #2eaae0;
text-align: center;
}
/* 在文字我的前面加一个精灵图，也可以使用element-ui的icon图标 */
.my i{
font-size: 15px;
margin: 6px 2px;
}
.my::after{
content: "我 的";
display: block;
position: relative; /* 使用相对定位，来改变块级元素的位置*/
left: 1px;
bottom: 4px;
}
/* ::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素 */
/* .my::before{
content: "";
display: block;
width: 24px;
height: 24px;
background-image: url(../images/0.png);
background-size: 70px;
background-position: 665px -407px;
margin: 4px auto 0px;
} */
/* 焦点图 */
.focus{
padding-top: 44px; /* 由于搜索模块采用的是固定定位，因为固定定位是不占位置的，会将图片部分盖住一部分，需要向下移动一部分来让图片完全显示出来 */
}
.focus img{
width: 100%; /* 让图片宽度和父亲一样宽 */
}
/* 局部导航栏 */
.local-nav{
/* 使用弹性布局，不要给宽度，高度固定64px */
display: flex;
height: 64px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin: 0px 3px;
}
.local-nav li{
flex: 1; /* 每个小li，一人占一份 */
margin: 1px 1px;
}
ul:nth-child(1) li:nth-child(1){
/* 从上到下渐变 */
background-image: linear-gradient(#FB5E56,#FB8350);
background-color: rgba(219, 72, 14, 0.7);
border-top-left-radius: 5px;
}
ul:nth-child(1) li:nth-child(2){
background-image: linear-gradient(#3E87FA,#50B2FA);
}
ul:nth-child(1) li:nth-child(3){
background-image: linear-gradient(#6085FF,#65A2FF);
}
ul:nth-child(1) li:nth-child(4){
background-image: linear-gradient(#32C5B6,#50D8B3);
}
ul:nth-child(1) li:nth-child(5){
background-image: linear-gradient(#FF8A39,#FFA746);
border-top-right-radius: 5px;
}
ul:nth-child(2) li:nth-child(1){
background-color: #FFF5F1;
}
ul:nth-child(3) li:nth-child(1){
background-color: #FFF5F1;
border-bottom-left-radius: 5px;
}
ul:nth-child(2) li:nth-child(2),ul:nth-child(3) li:nth-child(2){
background-color: #EFF9FF;
}
ul:nth-child(2) li:nth-child(3),ul:nth-child(3) li:nth-child(3){
background-color: #F2F5FF;
}
ul:nth-child(2) li:nth-child(4),ul:nth-child(3) li:nth-child(4){
background-color: #ECFCF8;
}
ul:nth-child(2) li:nth-child(5){
background-color: #FFF9F2;
}
ul:nth-child(3) li:nth-child(5){
background-color: #FFF9F2;
border-bottom-right-radius: 5px;
}
.local-nav a{
display: flex; /* 弹性布局 */
flex-direction: column; /* 设置主轴为列，那么侧轴为x轴 */
align-items: center; /* 设置侧轴的排列方式 */
margin-top: 7px;
font-size: 12px;
}
.local-nav:nth-child(1) a{
color: blanchedalmond;
}
.local-nav:nth-child(2) a,.local-nav:nth-child(3) a{
color: black;
}
.local-nav li [class^="local-nav-icon"]{
width: 32px;
height: 32px;
background: url(../images/nav.png) no-repeat;
background-size: 30px;
}
.local-nav li .local-nav-icon-icon1{
background-position: 0px -90px;
}
.local-nav li .local-nav-icon-icon2{
background-position: 0px -180px;
}
.local-nav li .local-nav-icon-icon3{
background-position: 0px -390px;
}
.local-nav li .local-nav-icon-icon4{
background-position: 0px -150px;
}
.local-nav li .local-nav-icon-icon5{
background-position: 0px -30px;
}
.local-nav li .local-nav-icon-icon6{
background-position: 0px -360px;
}
.local-nav li .local-nav-icon-icon7{
background-position: 0px -60px;
}
.local-nav li .local-nav-icon-icon8{
background-position: 0px -240px;
}
.local-nav li .local-nav-icon-icon9{
background-position: 0px -210px;
}
.local-nav li .local-nav-icon-icon10{
background-position: 0px -120px;
}
.local-nav li .local-nav-icon-icon11{
background-position: 0px -0px;
}
.local-nav li .local-nav-icon-icon12{
background-position: 0px -300px;
}
.local-nav li .local-nav-icon-icon13{
background-position: 0px -270px;
}
.local-nav li .local-nav-icon-icon14{
background-position: 0px -420px;
}
.local-nav li .local-nav-icon-icon15{
background-position: 0px -330px;
}
6.成果
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
