flex布局设置justify-content不生效问题及解决

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