目录🌻
四、携程网移动端案例 ☀️
Flex布局可以说是不论pc端移动端都必须要学会的布局方法，还不明白的同学们赶紧学起来吧
🔥🔥🔥
一、flex布局体验
传统布局：
兼容性好
布局繁琐
局限性，不能在移动端很好的布局
flex弹性布局：
操作方便，布局及为简单，移动端应用很广泛
pc端浏览器支持情况较差
IE 11或更低版本，不支持或部分支持
建议：
1.如果是pc端布局，我们还是传统布局。
2.如果是移动端或者不考虑兼容性问题的pc端布局，我们还是使用flex弹性布局
如果我们要进行这个布局
并且我们的HTML结构为：
<body>
<div>
<span>1</span>
<span>2</ span>
<span>3</ span>
</div>
</body>
我们看看传统流式布局和flex布局的区别，这样便于我们体会flex布局的优势
传统布局代码：
html
<!DOCTYPE html>
<html>
<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">
<title></title>
<style>
div {
width: 500px;
height: 200px;
background-color: pink;
}
span {
display: block;
float: left;
width: 100px;
height: 60px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>flex布局代码：
<!DOCTYPE html>
<html>
<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">
<title></title>
<style>
div {
display: flex;
width: 500px;
height: 200px;
background-color: pink;
}
div span {
width: 100px;
height: 60px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>它的效果和传统布局是一样的，并且我们不需要考虑他是块级元素还是行内元素，或者考虑清除浮动等等影响
如果我们要三个span平均分三等份的话，只需要加一句flex:1,也就是:
div span {
flex:1;
width: 100px;
height: 60px;
background-color: purple;
}这样就可以轻松的实现平均分三等份了
有没有体验到flex弹性布局的便捷:blush:
二、flex布局父项常见属性
1.flex-direction
flex-direction 设置主轴方向
就是他决定子级元素是横着排列还是竖着排列
默认是 flex-direction:row (横着从左往右排)
在上面的例子中，如果给父级添加 flex-direction:column，子级元素就会竖着排列：
代码：
div {
display: flex;
width: 500px;
height: 200px;
background-color: pink;
flex-direction: column;
}2.justify-content
justify-content 设置主轴上的子元素排列方式
默认为： justify-content:flex-start; (从头开始排,贴着左边对齐)
如果想贴着右边对齐就是：
justify-content:flex-end;如果想沿着主轴居中对齐就是：
justify-content:center;这样我们实现让父盒子里的子盒子水平居中对齐就非常的方便了
平均分配剩余空间：
justify-content:space-around;
先两边贴边，再平分剩余空间：
justify-content:space-between;
3.flex-wrap
我们先创建一个粉色的大盒子里面通过flex布局把四个紫色的小盒子排列在一行显示
相关代码如下：
<!DOCTYPE html>
<html>
<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">
<title></title>
<style>
div {
display: flex;
width: 500px;
height: 200px;
background-color: pink;
}
div span {
width: 100px;
height: 60px;
background-color: purple;
color: aliceblue;
margin: 5px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>在这个例子中我们有四个span，如果有五个呢，很明显一行放不开，他会另起一行么？
我们再添加一个span元素，并运行代码：
他并没有换行显示，而且让紫色盒子本来的宽度变小了
这是因为，在flex布局中，默认的子元素是不换行的，如果装不开，则会缩小子元素的宽度
flex-wrap 属性默认不换行
若想换行显示，则在父类中添加：
flex-wrap:wrap;
在上例中添加此语句后：
这样就可以在不改变子盒子的条件下自动换行显示了
4.align-items（单行）
设置侧轴上的子元素排列方式（单行）
如果我们想让上例中的子元素在父盒子里居中对齐（水平，竖直方向均居中），应该怎么办呢？
修改一下子盒子（紫色）的父级（粉色）盒子的样式：
div {
display: flex;
width: 500px;
height: 200px;
background-color: pink;
justify-content: center; /*主轴居中*/
align-items: center; /*侧轴居中*/
}注意：这里是给父级添加样式，而不是给需要居中的盒子本身
这样我们就实现了侧轴居中的效果
5.align-content（多行）
设置侧轴上的子元素的排列方式（多行）
只能运用于子项出现换行的情况，在单行下是没有效果的
| 属性 | 说明 |
| flex-start | 默认在侧轴头部开始排列 |
| flex-end | 在侧轴尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| stretch | 设置子项元素平分父元素高度 |
三、flex布局子项常见属性
1.flex属性
flex属性定义子项分配剩余空间，用flex来表示所占的份数
如果我们想让下面四个紫色盒子平分父盒子的宽应该怎么做：
最关键的就是在子盒子样式里加入 flex:1 表示每个子盒子元素占一份
2.align-self
如果我们想让第三号盒子下来，应该怎么做呢？
用我们之前学的align-items:flex-end;能够实现么？
align-items 用来给父项设置，这样的话子项的四个元素会一起下来，不能做到让指定元素下来的效果
所以我们只需给第三个span元素添加 align-self:flex-end; 就能够实现想要的效果了
四、携程网移动端案例
实现效果：
index.html:
<!DOCTYPE html>
<html>
<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="index.css">
<title>携程在手，说走就走</title>
</head>
<body>
<!--顶部搜索-->
<div class="search-index">
<div class="search">搜索：目的地/酒店/景点/航班号</div>
<a href="#" class="user">
我 的
</a>
</div>
<!--焦点图模块-->
<div class="focus">
<img src="08.png" alt="">
<div class="lunbo">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<!--局部导航栏-->
<ul class="local-nav">
<li>
<a href="#" title="景点·玩乐">
<span class="local-nav-icon-icon1"></span>
<span class="final">景点·玩乐</span>
</a>
</li>
<li>
<a href="#" title="周边游">
<span class="local-nav-icon-icon2"></span>
<span class="final">周边游</span>
</a>
</li>
<li>
<a href="#" title="美食林">
<span class="local-nav-icon-icon3"></span>
<span class="final">美食林</span>
</a>
</li>
<li>
<a href="#" title="一日游">
<span class="local-nav-icon-icon4"></span>
<span class="final">一日游</span>
</a>
</li>
<li>
<a href="#" title="当地攻略">
<span class="local-nav-icon-icon5"></span>
<span class="final">当地攻略</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"></span>
<span class="final">WiFi电话卡</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span class="final">保险·签证</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span class="final">外币兑换</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span class="final">购物</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span class="final">当地向导</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span class="final">自由行</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span class="final">境外玩乐</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span class="final">礼品卡</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span class="final">信用卡</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span class="final">更多</span>
</a>
</li>
</ul>
<!--销售模块-->
<div class="sales-box">
<img src="6.png" alt="">
</div>
<!--底部-->
<div class="footer">
<a href="#">电话预定</a>
<a href="#">下载客户端</a>
<a href="#">我的</a>
</div>
</body>
</html>index.css:
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color: rgb(231, 241, 245);
}
.search-index {/*顶部右部分固定大小盒子，搜索框部分自适应用flex布局*/
/*固定定位跟父级无关，他以屏幕为准*/
display: flex;
position: fixed;
top: 0%;
left: 50%;
transform: translateX(-50%);/*定位的盒子居中方法,往左走自身宽度一半*/
width: 100%;/*固定的盒子应该有宽度*/
min-width: 320px;
max-width: 540px;
height: 44px;
background-color: #F6F6F6;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.search {
flex: 1;
height: 26px;
border: 1px solid #ccc;
line-height: 24px;/*c3盒模型，要减去边框*/
margin: 8px 10px;
border-radius: 5px;
font-size: 15px;
color: #666;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.search::before {
float: left;
content: "";
display: block;/*转换为块级元素*/
width: 23px;
height: 23px;
background: url(12.jpg) no-repeat;
background-size: 23px auto;
margin-right: 10px;
}
a {
text-decoration: none;
color: #222;
}
.user {
width: 44px;
height: 44px;
font-size: 10px;
text-align: center;
color: #2eaae0;
}
.user::before {
content: "";
display: block;
width: 30px;
height: 25px;
background: url(45.png) no-repeat -3px -410px;
background-size: 34px auto;
margin: 2px auto 0;
}
.focus {
position: relative;
min-width: 320px;
max-width: 540px;
margin: 0 auto;
padding-top: 44px;
z-index: -1;
}
.focus img {
display: block;
width: 100%;
}
.focus .lunbo {
display: flex;
position: absolute;
bottom: 0%;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 10px;
justify-content: space-around;
align-items: center;
}
.focus .lunbo .circle {
width: 8px;
height: 8px;
background-color: #ccc;
background: rgba(0, 0, 0, .2);
border-radius: 50%;
}
.focus .lunbo .circle:first-child {
background-color: #666;
}
/*局部导航栏*/
.local-nav {
display: flex;
height: 64px;
min-width: 320px;
max-width: 530px;
margin: 0 auto;
margin-top: 3px;
background-color: #fff;
border-radius: 8px;
}
.local-nav ul {
margin: 0;
padding: 0;
}
.local-nav li {
flex: 1;
list-style: none;
color: #fff;
}
.local-nav a {
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
}
.local-nav li [class^="local-nav-icon"] {
width: 32px;
height: 32px;
background: url(45.png) no-repeat -2px -478px;
background-size: 34px auto;
margin-top: 5px;
}
.local-nav li .local-nav-icon-icon2 {
background-position: -2px -240px;
}
.local-nav li .local-nav-icon-icon3 {
background-position: -2px -137px;
}
.local-nav li .local-nav-icon-icon4 {
background-position: -2px 0px;
}
/*nav*/
nav {
overflow: hidden;
min-width: 320px;
max-width: 530px;
margin: 0 auto;
margin-top: 3px;
border-radius: 8px;
}
.nav-common {
display: flex;
height: 88px;
background-color: pink;
}
.nav-common:nth-child(2) {
margin: 3px 0;
}
.nav-items {
flex: 1;
display: flex;
flex-direction: column;
text-align: center;
line-height: 44px;
}
.nav-items a {
flex: 1;
color: #fff;
font-size: 15px;
text-shadow: 1px 1px rgba(0, 0, 0, .2);
}
.nav-items a:first-child {
border-bottom: 1px solid #fff;
}
.nav-items:nth-child(1) a {
border: 0;
background: url(45.png) no-repeat 45px -1090px;
text-shadow: 1px 1px rgba(0, 0, 0, .4);
background-size: 84px auto;
}
.nav-items:nth-child(-n+2) {
border-right: 2px solid #fff;
}
.nav-common:nth-child(2) .nav-items:nth-child(1) a {
background: url(45.png) no-repeat 45px -497px;
}
.nav-common:nth-child(3) .nav-items:nth-child(1) a {
background: url(45.png) no-repeat 45px -409px;
}
.nav-common:nth-child(1) {/*背景渐变做法*/
background: -webkit-linear-gradient(left,#FA5A55,#FA994D);
}
.nav-common:nth-child(2) {
background: -webkit-linear-gradient(left,#4B90ED,#53BCED);
}
.nav-common:nth-child(3) {
background: -webkit-linear-gradient(left,#34C2A9,#6CD559);
}
.subnav-entry {
display: flex;
min-width: 320px;
max-width: 530px;
margin: 0 auto;
margin-top: 3px;
border-radius: 8px;
background-color: #fff;
flex-wrap: wrap;
padding: 5px 0;
box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
}
.subnav-entry li {
/*里面的盒子可以写%相对于父级来说*/
list-style: none;
flex: 20%;
}
.subnav-entry a {
display: flex;
flex-direction: column;
align-items: center;
}
.subnav-entry-icon {
width: 28px;
height: 28px;
margin-top: 4px;
font-family: "icomoon";
font-size: 25px;
}
.final {
font-size: 12px;
}
.sales-box {
min-width: 320px;
max-width: 540px;
margin: 0 auto;
margin-top: 3px;
border-radius: 8px;
}
.sales-box img {
width: 100%;
}
.footer {
display: flex;
min-width: 320px;
max-width: 540px;
height: 35px;
margin: 0 auto;
margin-top: 5px;
background-color: #fff;
text-align: center;
line-height: 35px;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
.footer a {
display: block;
height: 35px;
flex: 1;
text-shadow: 1px 1px rgba(0, 0, 0, .2);
font-size: 14px;
}通过这个案例大家可以对flex布局有了新的认识，并且对其他的css知识点的综合运用也能融会贯通
希望看到这里的同学们能够给个关注 :stuck_out_tongue_winking_eye:
1240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
