如图,使用了flex布局的盒子内有两个元素,需要让两个元素只有中间留空。
本来这种情况理应使用 justify-content: space-between; 但如此设置并不生效,测试中对justify-content设置其他值也同样不生效。
代码如下:
//父盒子
.left {
width: 143px;
height: 234px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
//子盒子
.item {
width: 144px;
height: 87px;
}
问题原因:两个子元素的默认排列方向为x轴,其显示在两列是因为 flex-wrap:wrap;会将其强制换行,但并未改变其排列方向,因此设置的justify-content自然也就看起来不生效。
解决:给父元素设置 flex-direction: column 让元素垂直排列。在设置主轴排列方式就没有问题了。