如图,使用了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 让元素垂直排列。在设置主轴排列方式就没有问题了。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐