在CSS中，使用Flexbox布局时，可以通过几个属性来控制容器内的项目之间的间距

display弹性布局，flex:1是占据剩下的空间

关于displa:flex

/* 水平和垂直居中，水平和垂直方向上的间距均匀分布 /
.container {
display: flex;
justify-content: space-between; / 左右对齐 /
align-items: center; / 上下间距 */
flex-direction: row行排列;
gap:5%;元素间距
}

/* 水平居中，垂直居中，水平方向上的间距均匀分布 /
.container {
display: flex;
justify-content: center; / 水平居中 对齐*/
align-items: center; /* 配合lex-direction: row可控制上下左右中排列 */
}

/* 多行内容时，行与行之间的间距 /
.container {
display: flex;
flex-wrap: wrap; / 允许多行 /
align-content: space-around; / 行间距均匀分布 */
}

/* 单行内容时，水平方向上的间距 /
.container {
display: flex;
justify-content: space-around; / 单行间距均匀分布 */
}

关于flex:1

flex：1，其实就是 flex-grow:1;flex-shrink:1;flex-basis:0% 这三个属性的简写
https://blog.csdn.net/qq_45634593/article/details/135935979

flex-grow: 0; / 0表示正常状态，不放大 /
flex-grow: 1; / 1表示一旦发生变化，弹性子元素的宽度也会做出相应的调整。
flex-shrink: 0; / 因为弹性盒子display:flex设置之后，当盒子个数过多时，小盒子会自动缩放，当拉着浏览器的右侧伸缩时，盒子会跟着伸缩，一起缩放。但是加了flex-shrink之后，盒子就不会跟着缩放了，实实在在的有多宽就是多宽，会出现水平滚动条 /
flex-shrink: 1; / 设置为1之后就可以缩放了 /