css3 - flex布局下，如何对齐子元素？

问题描述

如图是我使用justify-content:space-around;，但我希望的是第二行子元素能和第一行上下对齐，其中子元素的数量不固定，请问如何解决？

问题解答

justify-content:space-between;

可能需要点计算：

.container { width: 510px; display: flex; flex-wrap: wrap; border: 1px solid #ccc;}.item { width: 150px; height: 150px; background: red; margin: 10px;}

<p class='container'> <p class='item'></p> <p class='item'></p> <p class='item'></p> <p class='item'></p> <p class='item'></p></p>

在线查看 https://jsfiddle.net/zktf3oc5/

flex 布局在父容器不定宽的情况下做不到你想要的效果.

Flex实现布局，主要是你的想法突破常规，横着布局不成功，使用竖轴方向布局，设为三列，每列，flex-direction:colomn;justify-content :space-around;总的三列再采用一次justify-content :space-around;