flex-wrap属性
flex-wrap属性定义项目溢出时如何换行，默认项目都排在一条轴线。注意前提是项目溢出时。
flex-wrap:nowrap(默认) | wrap | wrap-reverse;
！！！flex-wrap属性值是nowrap时，如果项目的宽度加起来溢出了容器的宽度，会压缩项目的宽度使所有项目一排显示。也就是说项目的宽度可能比实际的宽度小。
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
在设置整体垂直居中时：
当flex-wrap属性值是nowrap时，要和align-items控制【单行】的侧轴对齐方式一起使用，和align-content搭配使用无效。
当flex-wrap属性值是wrap时，要和align-content控制【多行】的侧轴对齐方式一起使用，和align-items搭配使用无效。
[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">
<title>垂直居中</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 400px;
height: 200px;
background: #ccc;
margin: 30px auto;
display: flex;
justify-content: space-evenly;
align-items: center;
/* flex-wrap: wrap;
align-content: center; */
}
/* 当垂直居中时，如果不换行nowrap,align-items: center; 如果多行wrap,要用align-content: center; */
p{
width: 100px;
height: 20px;
background: lightpink;
border:2px solid lightblue;
}
</style>
</head>
<body>
<div>
<p class="part1">1</p>
<p class="part1">2</p>
<p class="part1">3</p>
<p class="part1">4</p>
<p class="part1">5</p>
</div>
</body>
</html>
flex-shrink属性
flex-shrink属性生效的前提是容器的宽度小于所有项目的宽度之和。flex-shrink定义了项目的缩小比例，默认为1，【即如果空间不足，该项目将缩小。】负值无效。值越大，减小的越厉害。
flex-shrink: 1（默认） | number
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
所以在项目宽度加起来超过容器宽度时，项目会自动缩小，因为每个项目的flex-shrink默认为1
>>拓展
eg：
p{
width: 100px;
flex-shrink: 2;
}
项目同时设置了width：100px和flex-shrink：2；这里的值2不是参照自身，而是多出来的宽度的份数，所以实际宽度是（项目的宽度 - 平均值 * flex-shrink的值）
项目同时设置width和flex-shrink时，宽度的计算方法是：
step1: 算出容器的宽度
step2：算出所有的项目的宽度之和
step3：超出的宽度 = 所有的项目的宽度之和 - 容器的宽度
step4：平均值 = 超出的宽度 / （所有项目的flex-shrink的和）
step5：项目的实际宽度 = 项目本来的宽度 - 平均值 * flex-shrink的值
[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">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 400px;
margin: 20px auto;
height: 200px;
display: flex;
box-sizing: border-box;
border: 2px solid navajowhite;
}
/* p元素同时存在width和flex-shrink时，实际width的计算方法 */
p{
width: 300px;
height: 100px;
}
p:nth-child(1){
background: brown;
}
p:nth-child(2){
background: yellowgreen;
}
.part1{
flex-shrink: 1;
}
/* .part1的width是300px，两个p元素的width为600px，但是div的width是400px；所以超出了200px，shrink的均值是200px/4 = 50px，所以.part1的实际width是300-50 = 250px */
.part2{
flex-shrink: 3;
}
/* .part2的width是300px，两个p元素的width为600px，但是div的width是400px；所以超出了200px，shrink的均值是200px/4 = 50px，所以.part2的实际width是300-50*3 = 150px */
</style>
<body>
<div>
<p class="part1"></p>
<p class="part2"></p>
</div>
</body>
</html>
flex-gorw属性
flex-grow属性生效的前提是容器的宽度大于所有项目的宽度之和（即容器会有剩余的空间），flex-grow定义项目的放大比例，默认为0，即如果存在剩余空间也不放大。值越大，分配的剩余空间越多。
flex-grow: 0（默认） | integer
如果所有项目的flex-grow属性都为1，如果有剩余空间的话则它们将等分剩余空间。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
>>拓展：
eg：
p{
width: 100px;
flex-grow: 2;
}
项目同时设置了width：100px和flex-grow;这里的2不是参照自身，不是自身的2倍，而是剩余空间的宽度/总份数之后得到的平均值 * 2，所以这个项目的最终width是（width + 平均剩余空间 * 2）
项目同时设置width和flex-grow时，宽度的计算方法是：
step1: 算出容器的宽度
step2：算出所有的项目的宽度之和
step3：多余的宽度 = 容器的宽度 - 所有的项目的宽度之和
step4：平均值 = 多余的宽度 / （所有项目的flex-grow的和）
step5：项目的实际宽度 = 项目本来的宽度 + 平均值 * flex-grow的值
[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">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
/* p元素同时存在width和flex-grow时，实际width的计算方法 */
div{
width: 400px;
margin: 20px auto;
height: 200px;
display: flex;
border: 2px solid navajowhite;
}
p{
width: 100px;
height: 100px;
}
p:nth-child(1){
background: brown;
}
p:nth-child(2){
background: yellowgreen;
}
.part1{
flex-grow: 3;
}
/* .part1的width是100px，两个p元素的width为200px，但是div的width是400px；所以多余出了200px，grow的均值是200px/4 = 50px，所以.part1的实际width是100+50*3 = 250px */
.part2{
flex-grow: 2;
}
/* .part2的width是100px，两个p元素的width为200px，但是div的width是400px；所以多余出了200px，grow的均值是200px/4 = 50px，所以.part2的实际width是100+50*2 = 200px */
</style>
<body>
<div>
<p class="part1"></p>
<p class="part2"></p>
</div>
</body>
</html> | 
收藏
淘帖
踩
