一、背景介绍
- CSS3 提供一种崭新的布局方式：Flexbox 布局，即弹性伸缩布局模型(Flexible Box)。用来提供一个更加有效的方式实现响应式布局
- 它可以简便、完整、响应式地实现各种页面布局，包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了
二、伸缩容器概念
2.1、概念介绍
- 任何一个容器都可以指定为Flex布局，行内元素也可以
- 有兼容问题，webkit内核的浏览器要必须加上-webkit前缀
注意：设为Flex布局以后，子元素的float，clear和vertical-align属性将失效
- 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
- 子项不设置宽度
- 默认存在两根轴，水平的主轴和垂直的交叉轴
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yfcet9hp-1607078150667)(伸缩布局_files/02e20e24-33fd-42d3-bb44-516b97658b0f.png)]](https://i-blog.csdnimg.cn/blog_migrate/eed633c1f3d9ad8975fdbba811e125a1.png)
2.2、排列：
-
项目默认沿主轴排列
-
单个项目（成员）占据的主轴空间叫做man size，占据交叉空间叫做cross size
-
Flex布局相关属性分为两波，一部分是作用在容器上，一部分是作用在子项上
-
无论作用在flex容器上，还是作用在flex子项，都是控制子项的呈现，只是前者控制的是整体，后者控制的是个体
三、伸缩容器属性详解(父元素上)
3.1、flex-direction伸缩布局的排列方式 (给父元素设置)
flex-direction：值
设置排列方式
值：
- （1）、默认是水平方向（row）
注意：该属性是给伸缩容器设置的（父盒子）
/*目的：实现伸缩布局：响应式布局*/
section {
width:200px;
height: 300px;
border: 1px solid #000;
margin: 0 auto;
/* 第一步：首先给父元素声明为伸缩盒子*/
display: flex;
flex-direction: column;
}
div{
flex: 1;
}
/*第二步：设置要伸缩的元素*/
section div:first-child{
background: #9bceea;
}
section div:nth-child(2)
{
background: red;
}
section div:nth-child(3){
background: #a5a5a5;
}
</style>
</head>
<body>
<!--布局-->
<section>
<div></div>
<div></div>
<div></div>
</section>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nj43RDG5-1607078150671)(伸缩布局_files/b35307ad-826e-44fc-9c63-079191be8ec5.png)]](https://i-blog.csdnimg.cn/blog_migrate/6a33e82385046f4f9fb41f9bd5709e10.png)
- （2）、column为垂直排列，给父元素盒子设置flex-direction（垂直排列），子盒子flex都为1
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h9V3BsXf-1607078150673)(伸缩布局_files/975ff1c4-bc13-4597-96b5-f6c5f26204cf.png)]](https://i-blog.csdnimg.cn/blog_migrate/4a68dfea682f012e7f28525624beaaca.png)
- (3)、row-reverse主轴为水平方向，起点和row相反
- （4）、column-reverse
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d0MXhCuK-1607078150677)(伸缩布局_files/0bfd522c-457a-4217-9d45-2e15a6b17012.png)]](https://i-blog.csdnimg.cn/blog_migrate/a52c1743c87d502b80ce0b472fa57d8a.png)
http://m.ctrip.com/html5/ 携程网手机端地址
3.2、flex-wrap属性控制是否换行（给父元素设置）
- 当子盒子的宽度大于父盒子，要如何处理？这时候伟大的flex-wrap就发挥用处了
flex-wrap：值
值
-
（1）、nowrap:默认值，不换行，压缩显示，每个盒子的宽度会变窄，每个元素都有位置
-
（2）、wrap，必要的时候进行拆行和拆列
-
(3)、wrap-reverse:必要的时候进行拆行和拆列，但是反方向
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值是row nowrap
.box{
flex-flow: flex-direction||flex-wrap
}
3.3、最值（设置伸缩的最大或最小值）（给父元素添加）
- min-width 最小值 min-width: 280px 最小宽度 不能小于 280
- max-width: 1280px 最大宽度 不能大于 1280
- 小于或者超过就不进行响应式
3.4、justify-content调整主轴（水平）对齐–设置布局的样子（给父盒子设置）
- 开发过程中还会遇到以下情况：就是父盒子设置为flex，但是内部子盒子没有设置flex份数，各自有固定宽度，但是固定宽度的综合还远远小于父盒子的总宽，这时候，父盒子还有一大块空间剩余，这种情况下，内部的子盒子可以怎么排列？
- （1）、flex-start:让子盒子从父盒子的开头开始排列，效果如下：
- （2）、flex-end：子盒子从父盒子的尾部开始排列：
- （3）、center：位于容器的中间
- （4）、space-between:左右的盒子贴近父盒子，中间的平均分布空白间距
- （5）、space-around：相当于给每个盒子添加了左右margin
- 中间占了两部分
- (6)、space-evently:是均匀，平等的意思，视觉上，每个flex子项
3.5、align-items调整侧轴对齐（垂直对齐，给父盒子设置，一般用于单行）
-
（1）、stretch：让子元素的高度拉伸以适应父盒子，注意一定要在子盒子不给高度的前提下才行；
-
(2)、center：竖直垂直居中
-
（3）、flex-start：位于容器的开头，垂直对齐开始位置；
-
（4）、flex-end：位于容器的尾部，垂直对齐结束位置；
-
3.6、align-content堆栈（针对flex容器里面多行的垂直对齐，同样是给父盒子设置）
- stretch默认值，项目被拉伸以适应容器
- center，项目位于容器的中心
- flex-start项目位于容器的开头
- flex-end项目位于容器的末尾
- space-between项目位于各行之间留有空白的容器内
- space-around项目位于各行之前，之间，之后都留有空白
- space-evenly：每一行元素都完全上下等分
*align-content是针对flex容器里卖弄多行得情况，align-item是针对一行情况进行排列的
- 必须对父元素设置自由盒属性：display:flex；
- 并且设置排列方式为横向排列，还要设置flex-wrap:wrap;
四、伸缩容器属性详解(子项元素上)
4.1、order
order
属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: <integer>; /* 整数值，默认值是 0 */
}
- 所有flex子项的默认order属性值是0，因此，如果我们想要某一个flex子项在最前面显示，可以设置比0小的整数，如-1就可以了。
4.2、flex-grow
flex-grow
属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。
.item {
flex-grow: <number>; /* default 0 */ /* 数值，可以是小数，默认值是 0 不支持负值*/
}
4.3、flex-shrink
shrink是“收缩”的意思，flex-shrink
主要处理当flex容器空间不足时候，单个元素的收缩比例。
4.4、flex-basis
4.5、flex
.item{
flex:份数；
}
4.6、align-self
align-self
属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items
属性。默认值为auto
，表示继承父元素的align-items
属性，如果没有父元素，则等同于stretch
。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
五、案例（携程网）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>携程网</title>
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
/*模拟移动端*/
body{
/*最小宽度*/
min-width: 320px;
/*最大宽度*/
max-width: 540px;
margin: 0 auto;
}
header{
width: 100%;
height: 100px;
}
img{
width: 100%;
height: 100%;
}
nav{
padding: 5px;
}
.row1{
height: 90px;
width: 100%;
background: #ff697a;
border-radius: 8px;
margin: 5px;
display: flex;
justify-content: space-around;
}
.row3{
border-left: 1px solid #fff;
flex: 1;
}
.hotel{
display: flex;
flex-direction: column;
}
a{
flex:1;
font-size: 18px;
color: #fff;
text-shadow: 0 2px 1px rgba(0,0,0,0.7);
line-height: 45px;
text-align: center;
}
a:first-child{
border-bottom: 1px solid #fff;
}
.row2{
background: cornflowerblue;
}
</style>
</head>
<body>
<header>
<img src="img/ctrip.jpg" alt="">
</header>
<nav>
<!-- 分四行-->
<div class="row1">
<div class="row3">
</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel ">
<a href="#">团购</a>
<a href="#">美好客栈</a>
</div>
</div>
<div class="row1 row2">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel ">
<a href="#">团购</a>
<a href="#">美好客栈</a>
</div>
</div>
<div class="row1" style="background: green">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel ">
<a href="#">团购</a>
<a href="#">美好客栈</a>
</div>
</div>
<div class="row1" style="background: orange">
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel ">
<a href="#">团购</a>
<a href="#">美好客栈</a>
</div>
</div>
</nav>
</body>
</html>
<div class="row3 hotel ">
<a href="#">团购</a>
<a href="#">美好客栈</a>
</div>
</div>
</nav>
</body>
</html>
参考
https://www.cnblogs.com/kunmomo/p/10856665.html
https://blog.csdn.net/Ronychen/article/details/100971392
扫一扫
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
