我试图拥有与justify-content:space-around完全相同的行为,但我希望我的盒子可以扩展,而不是在盒子之间留出空格。
请注意,我不希望我的盒子具有相同的大小,但希望盒子之间的空间具有相同的大小。
这是所需行为的fiddle (框-蓝色-应该填满整个宽度)
发布于 2016-08-10 06:47:56
将flex-grow: 1添加到所有flex项。
这样,可用空间将在它们之间均匀分配。
body {
padding: 50px;
}
.parent {
background: hsl(0,0%,90%);
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
-ms-justify-content: space-around;
-o-justify-content: space-around;
justify-content: space-around;
}
.child {
background-color:blue;
border: 1px solid hsl(0,0%,60%);
padding: 20px;
flex-grow: 1;
}<div class="parent">
<div class="child">this is a long text</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
https://stackoverflow.com/questions/38861552
复制相似问题