1.flex:1
做手机端项目时，我们经常遇到flex弹性布局，使用flex:1的作用是让项目能够自动填充剩余空间，实现自适应布局,本篇讲解 一下 子盒子 flex属性的具体含义，方便我们做项目时，灵活设置以便达到想要的效果
flex 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。
flex:1是flex-grow:1,flex-shrink:1,flex-basis:0%的缩写。
2.flex-grow
flex-grow项在 flex 容器中分配剩余空间的相对比例,剩余空间是 flex 容器的大小减去所有 flex 项加起来的大小
- 默认值：0
例：
<!DOCTYPE html>
<html lang=“zh-CN”>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>理解 flex</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
width: 800px;
height: 100px;
margin: 100px auto;
border: 1px solid #333;
color:#fff;
font-size: 200%;
}
.wrapper div {
/* 给每个子 盒子一个宽度 100px */
width: 100px;
height: 100px;
text-align: center;
line-height: 100%;
}
/* 分别设置不同的flex-grow值 */
.one {
flex-grow:1;
background-color: #ee8d8d;
}
.two {
flex-grow:2;
background-color: #e6ee8d;
}
.three {
flex-grow:3;
background-color: #97d4eb;
}
.four {
flex-grow:4;
background-color: #a5ea92;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
</body>
</html>如图：
3.flex-shrink
flex-shrink属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值
- 默认值：1（说明默认flex布局超出会自动收缩，来适应父盒子大小）
例：
.wrapper div {
/* 给每个 子盒子 一个宽度 300px */
width: 300px;
height: 100px;
text-align: center;
line-height: 100%;
}
/* 分别设置不同的flex-shrink值 */
.one {
flex-shrink: 1;
background-color: #ee8d8d;
}
.two {
flex-shrink: 2;
background-color: #e6ee8d;
}
.three {
flex-shrink: 3;
background-color: #97d4eb;
}
.four {
flex-shrink: 4;
background-color: #a5ea92;
}如图：
4.flex-basis
flex-basis指定了 flex 元素在主轴方向上的初始大小
例：
.wrapper div {
height: 100px;
text-align: center;
line-height: 100%;
}
/* 分别设置不同的flex-basis值 */
.one {
/* 设置具体宽度 */
flex-basis:100px;
background-color: #ee8d8d;
}
.two {
flex-basis:200px;
background-color: #e6ee8d;
}
.three {
/* 设置 百分比 */
flex-basis:50%;
background-color: #97d4eb;
}
.four {
/* 不设置或设置 flex-basis:auto，盒子本身宽度 */
flex-basis: auto;
background-color: #a5ea92;
}如图：
5.取值
通过设置 flex 属性的值或关键字来熟悉各个分属性的作用
1.flex:n (n为数字)
<!DOCTYPE html>
<html lang=“zh-CN”>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>理解 flex</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
width: 800px;
height: 100px;
margin: 100px auto;
border: 1px solid #333;
font-size: 200%;
}
.wrapper div {
/* 同时设置flex:n（数字）,width会失效 */
flex: 1;
width: 120px;
height: 100px;
text-align: center;
line-height: 100%;
background-color: #dbebad;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html> 
2.flex:initial
3.flex：none
4.flex:auto
5.总结
flex: initial : 相当于 flex:0 1 auto，表示项目会缩短适应容器，但不会伸长。
flex: none：相当于 flex: 0 0 auto，表示项目不会伸缩，保持原始大小。
flex: auto：相当于 flex: 1 1 auto，表示项目会根据自身大小和剩余空间进行伸缩。
flex: n（n为正整数）：相当于 flex: n 1 0%，表示项目的放大比例为n，其他值默认。
更多flex 的信息可以参考官网MDN https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex
标签：flex,basis,color,auto,布局,100px,弹性,background From： https://blog.csdn.net/m0_66970349/article/details/140643253