問題描述

如圖是我使用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;