你好，我正在尝试设置相同的flex项目宽度，所以.flexbox的宽度将与.width-example的宽度相同，将以%或vw为单位
null
.width-example {
width: 80%;
height: 50px;
background-color: blue;
margin-left: auto;
margin-right: auto;
}
.flexbox {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.flex-item {
width: 175px;
height: 175px;
background-color: green;
margin: 10px auto;
}<div class="width-example"> </div>
<div class="flexbox">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>null
.flexbox {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items:center;
width:80%;
}
.width-example {
width: 80%;
height: 50px;
background-color: blue;
align-items:center;
}
这应该很适合出发。
您正在设置.width-example的宽度，而不是您的.flexbox。将宽度和边距添加到您的.flexbox中
.flexbox {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
width: 80%;
margin-left: auto;
margin-right: auto;
}
我想把绿盒子装在蓝盒子的两边
像这样:
