css3 flex三栏布局疑问

Question

css3中flex布局现在非常流行，我的项目中也经常会用到，但是有时候用的时候不是很理想，想求教各位 是如何解决的？

比如我这个样式，3行3列，非常标准，用flex也正常显示，如图：

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 .5rem;

但是，如果我去掉中间某个，就变成这样了，如图：

图片中的元素并没有左对齐，这就是使用flex的后果，所以想请教各位如果想用felx但是又想左对齐 ，应该怎么解决这个问题呢，在线等！！！

Answer 1

justify-content: flex-start;这样设置可以。space-between指的是两端对齐，当然就是你出现的这种情况。给你看看比较直观的教程。阮一峰大神的http://www.ruanyifeng.com/blo...
可以直接去掉justify-content属性，flex-start是默认的，左对齐

Answer 2

遇到过同样的问题，我的解决方案是内部的子组件的宽度和边距都使用了百分比或者rem，加起来接近100%，父标签justify-content: flex-start; 另外float在flex中是无效的。

Answer 3

可以用浮动试试

Answer 4

你可以试试每个块用:

display:inline-block；width:33.33%;padding:0 .5rem;box-sizing:border-box;

Answer 5

附上一段教程：
http://www.ruanyifeng.com/blo...
flex-wrap: wrap;

没有实践，不知是否可行。

另外，可以使用空元素来补充你删除的元素。

Answer 6

justify-content: space-between;设置了多余空间放到元素中间。 当一行只有两个元素时，就方便放到左右两边。
如果要靠左，要这样写justify-content: flex-start。
我对flex相关的CSS属性做了整理：https://segmentfault.com/a/11...

Answer 7

如果用justify-content: flex-start;，当这个容器宽度不固定变化时，项目之间间距就不会像justify-content:space-around;时左右间隔自动相等，我想题主是想在前面几排间隔由justify-content: space-between;自动排列再来解决最后一排的问题，如果是这样的话，目前我没有看见一个比较好的方法，希望各位大神能提供好的解决方案。

Answer 8

float：left