[css]Flex弹性布局详解 [附携程网移动端案例]
目录
一、flex布局体验
传统布局：
flex弹性布局：
二、flex布局父项常见属性
1.flex-direction
2.justify-content
3.flex-wrap
4.align-items（单行）
5.align-content（多行）
三、flex布局子项常见属性
1.flex属性
2.align-self
四、携程网移动端案例 ☀️
Flex布局可以说是不论pc端移动端都必须要学会的布局方法，还不明白的同学们赶紧学起来吧
一、flex布局体验
传统布局：
兼容性好
布局繁琐
局限性，不能在移动端很好的布局
flex弹性布局：
操作方便，布局及为简单，移动端应用很广泛
pc端浏览器支持情况较差
IE 11或更低版本，不支持或部分支持
建议：
1.如果是pc端布局，我们还是传统布局。
2.如果是移动端或者不考虑兼容性问题的pc端布局，我们还是使用flex弹性布局
如果我们要进行这个布局
![[css]Flex弹性布局详解 [附携程网移动端案例]_第1张图片](http://img.e-com-net.com/image/info8/17c150d390ba45e0b3c6c0d0f96ecc5f.jpg)
并且我们的HTML结构为：
1
2
3
我们看看传统流式布局和flex布局的区别，这样便于我们体会flex布局的优势
传统布局代码：
html
flex布局代码：
它的效果和传统布局是一样的，并且我们不需要考虑他是块级元素还是行内元素，或者考虑清除浮动等等影响
如果我们要三个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，子级元素就会竖着排列：
![[css]Flex弹性布局详解 [附携程网移动端案例]_第2张图片](http://img.e-com-net.com/image/info8/fc7829f43be14788b36f643b5a9adcbf.jpg)
代码：
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;![[css]Flex弹性布局详解 [附携程网移动端案例]_第3张图片](http://img.e-com-net.com/image/info8/c534f60484aa4aa0afb295f6b71d087d.jpg)
先两边贴边，再平分剩余空间：
justify-content:space-between;![[css]Flex弹性布局详解 [附携程网移动端案例]_第4张图片](http://img.e-com-net.com/image/info8/ce6460816d574338ba50c62875a62c00.jpg)
3.flex-wrap
![[css]Flex弹性布局详解 [附携程网移动端案例]_第5张图片](http://img.e-com-net.com/image/info8/7759bb4e73c341df9d57ee1a06e4871a.jpg)
我们先创建一个粉色的大盒子里面通过flex布局把四个紫色的小盒子排列在一行显示
相关代码如下：
在这个例子中我们有四个span，如果有五个呢，很明显一行放不开，他会另起一行么？
我们再添加一个span元素，并运行代码：![[css]Flex弹性布局详解 [附携程网移动端案例]_第6张图片](http://img.e-com-net.com/image/info8/448731dacddf4d39a3645b90bbd1f924.jpg)
他并没有换行显示，而且让紫色盒子本来的宽度变小了
这是因为，在flex布局中，默认的子元素是不换行的，如果装不开，则会缩小子元素的宽度
flex-wrap 属性默认不换行
若想换行显示，则在父类中添加：
flex-wrap:wrap;
在上例中添加此语句后：![[css]Flex弹性布局详解 [附携程网移动端案例]_第7张图片](http://img.e-com-net.com/image/info8/dc1f160ff2b747949cb5053327b1c021.jpg)
这样就可以在不改变子盒子的条件下自动换行显示了
4.align-items（单行）
设置侧轴上的子元素排列方式（单行）
如果我们想让上例中的子元素在父盒子里居中对齐（水平，竖直方向均居中），应该怎么办呢？
修改一下子盒子（紫色）的父级（粉色）盒子的样式：
div {
display: flex;
width: 500px;
height: 200px;
background-color: pink;
justify-content: center; /*主轴居中*/
align-items: center; /*侧轴居中*/
}注意：这里是给父级添加样式，而不是给需要居中的盒子本身
![[css]Flex弹性布局详解 [附携程网移动端案例]_第8张图片](http://img.e-com-net.com/image/info8/fc6f135fa66d4929a0515ae0ff0a5bd7.jpg)
这样我们就实现了侧轴居中的效果
5.align-content（多行）
设置侧轴上的子元素的排列方式（多行）
只能运用于子项出现换行的情况，在单行下是没有效果的
| 属性 | 说明 |
| flex-start | 默认在侧轴头部开始排列 |
| flex-end | 在侧轴尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| stretch | 设置子项元素平分父元素高度 |
三、flex布局子项常见属性
1.flex属性
flex属性定义子项分配剩余空间，用flex来表示所占的份数
如果我们想让下面四个紫色盒子平分父盒子的宽应该怎么做：![[css]Flex弹性布局详解 [附携程网移动端案例]_第9张图片](http://img.e-com-net.com/image/info8/105eadef94d64ac19c016d0738b6999c.jpg)
最关键的就是在子盒子样式里加入 flex:1 表示每个子盒子元素占一份
2.align-self
如果我们想让第三号盒子下来，应该怎么做呢？
用我们之前学的align-items:flex-end;能够实现么？
align-items 用来给父项设置，这样的话子项的四个元素会一起下来，不能做到让指定元素下来的效果
所以我们只需给第三个span元素添加 align-self:flex-end; 就能够实现想要的效果了
![[css]Flex弹性布局详解 [附携程网移动端案例]_第10张图片](http://img.e-com-net.com/image/info8/402e9584df5c4a69b852b36ffec85fc8.jpg)
四、携程网移动端案例
实现效果：
![[css]Flex弹性布局详解 [附携程网移动端案例]_第11张图片](http://img.e-com-net.com/image/info8/1b9161d1ff3143909f16aacc72989547.jpg)
index.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: