如何使用 Flex 和 Space-between 直線對齊項目

Question

從圖中可以看出，當第一列的寬度增加時，它也會推動第二列的內容。 我想要直線的第二列的項目。 一種方法可能是為第一列提供固定寬度，但我不想這樣做，因為列數是動態的。 有時，只有三列，所以我會動態增加寬度，這是我不想做的。

 #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: 50px; height: 50px; margin: 0 5px; }

 <div id='box'> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div>

演示： http : //jsfiddle.net/GLpUp/

Answer 1

您不必設置精確的“固定”寬度，而是嘗試使用 %“按比例”設置寬度。

當所有 div 都有 100% 時，它們都將具有相同的寬度。

如果您知道您的第二列不包含太多內容，只需減少百分比即可。 像這樣，所有列都將與它們上方或下方的鄰居具有相同的寬度。

這將是使用 flexbox 的解決方案。 我同意評論，建議使用網格或表格。

 #row { display: flex; width: 100%; } .item { width: 100%; height: 50px; border: 1px solid teal; } .item:nth-of-type(2) { width: 30%; }

 <div id='row'> <div class='item'>I have a lot of content</div> <div class='item'>just 1</div> <div class='item'>...</div> <div class='item'>...</div> </div> <div id='row'> <div class='item'>This is a different length</div> <div class='item'>but</div> <div class='item'>the columns have the same</div> <div class='item'>widths as in row before</div> </div>