目录
一、伸缩布局是什么？
伸缩布局是为避免多元素之间排版紊乱而产生的，在之前人们通过position定位，float浮动等来控制元素的位置，对于整体排版而言，position比较固定，而float会让元素的浮在其他元素上面，都有所不足，在伸缩布局出现后，大大方便我们进行元素的整体规划
二、使用
伸缩布局基本使用还是比较简单的，需要了解几个基本的语句
我们这里简单用一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ex</title>
<style type="text/css">
div{
background-color: red;
}
.div{
margin: 0 auto;
width: 40%;
height: 300px;
border: 1px solid red;
background-color: yellow;
}
.item{
width: 50px;
background-color: hotpink;
height: 50px;
align-content: center;
text-align: center;
}
</style>
</head>
<body>
<div class="div">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>效果图：
可以看到，我这里是存在一个父div和多个子div的，伸缩布局的前提就是存在父子
接下来的就是定义伸缩盒子
1、定义伸缩盒子
这个比较简单，在父盒子style中加入：display: flex;即可
.div{
margin: 0 auto;
width: 40%;
height: 300px;
border: 1px solid red;
background-color: yellow;
/*定义*/
display: flex;
}之后运行页面将变成：
这是默认主轴和相左对齐起的作用，后面会讲到
2、对伸缩盒子进行进一步操作
主轴：生成伸缩盒子后，默认水平
侧轴：生成伸缩盒子后，默认垂直水平，即竖直
（1）justify-content 调整主轴排版
justify-content: space-around;justify-content具有多个参数，这里简单讲其中五个
flex-start:默认，相左对齐
flex-end:向右对齐
center：中间对齐
space-between：元素中间间隔
space-around：元素两边间隔
这里我把后三个的效果写出来：
（2）align-items 调整侧轴排版
align-items的参数同样不少，简单说其中四个
flex-start：默认，靠上
flex-end:靠下
center：靠中
stretch：拉伸，该属性只能在子元素高度不固定时起作用
后三个效果：
# 第三个我把子元素的高度注释掉了
#需要说的是，align-items与justify-content以及后几个是可以连用的，这里我为了结果更加明显，就没有使用
（3）flex-direction 主侧轴转换与方向变化
一共四个参数
row：默认，水平方向
row-reverse：水平方向，左右方向改变
column：竖直方向
column-reverse：竖直方向，左右方向改变
这里还是演示后三个效果：
#reverse的效果相当于轴参数的flex-end
（4）flex-wrap 强制换行
当然这种情况适用于多个子元素的情况，我们稍微改一下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ex</title>
<style type="text/css">
div{
background-color: red;
}
.div{
margin: 0 auto;
width: 40%;
height: 300px;
border: 1px solid red;
background-color: yellow;
/*定义*/
display: flex;
/*justify-content: space-around;*/
/*align-items: stretch;*/
/*flex-direction: column-reverse;*/
}
.item{
width: 50px;
background-color: hotpink;
height: 50px;
align-content: center;
text-align: center;
}
</style>
</head>
<body>
<div class="div">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>效果：
很明显，我们子元素的width变小了，明显父元素的width不够，但是它默认不能换行，这个时候如果需要换行就要用到flex-wrap
他有三个参数
nowrap:默认，不允许换行
wrap：允许换行
wrap-reverse：逆换行
后两个的效果是：
3、对子元素的简单操作
这里说两个比较常用的
flex与order
（1）flex 比例划分
该属性要在子元素上使用，这里我用nth-child
因为使用比例划分，会让space-around与space-between失效，我这里为子元素加了border
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ex</title>
<style type="text/css">
div{
background-color: red;
}
.div{
margin: 0 auto;
width: 40%;
height: 300px;
border: 1px solid red;
background-color: yellow;
/*定义*/
display: flex;
justify-content: space-between;
/*align-items: stretch;*/
/*flex-direction: column-reverse;*/
/*flex-wrap: wrap;*/
}
.item{
width: 50px;
background-color: hotpink;
height: 50px;
align-content: center;
text-align: center;
border: 1px dashed black;
}
.item:nth-child(1){
flex: 2;
}
.item:nth-child(2){
flex: 3;
}
.item:nth-child(3){
flex: 2;
}
</style>
</head>
<body>
<div class="div">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>效果：
#这里的flex：2等有点类似于数学中的加权运算，是所有加到一起作为分母
#如果是多个子元素可以用even，odd，2n+1等来控制，这里比较少就不说了
（2）order 排序
order 怎么说呢，有点简单，就类似比大小，小的在前面，这里你可以随便写数值，真的就是比大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ex</title>
<style type="text/css">
div{
background-color: red;
}
.div{
margin: 0 auto;
width: 40%;
height: 300px;
border: 1px solid red;
background-color: yellow;
/*定义*/
display: flex;
justify-content: space-between;
/*align-items: stretch;*/
/*flex-direction: column-reverse;*/
/*flex-wrap: wrap;*/
}
.item{
width: 50px;
background-color: hotpink;
height: 50px;
align-content: center;
text-align: center;
border: 1px dashed black;
}
.item:nth-child(1){
order: 1939;
}
.item:nth-child(2){
order: 1000;
}
.item:nth-child(3){
order: 99999;
}
</style>
</head>
<body>
<div class="div">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>效果图：
#突然想到如果不写order呢，试了一下，如果不是其他不是负数，结果是在最前面，可以猜到如果不写默认为0，虽然不知道为啥，但就是这样,
#还有并列情况，这种跟没写一样，不会真有人这么闲吧
#另外还有flex的默认，他这个默认好像是0.5，试了几遍，不太清楚，并列的话相当于等分
总结
这篇文章是对于学习视频的总结与练习，希望能给大家一点帮助