时间戳

首页 > 解决方案 > 如何使用 Flex 和 Space-between 直线对齐项目

html - 如何使用 Flex 和 Space-between 直线对齐项目

问题描述

从图中可以看出，当第一列的宽度增加时，它也会推动第二列的内容。我想要直线的第二列项目。一种方法是为第一列提供固定宽度，但我不想这样做，因为列数是动态的。有时，只有三列，所以我会动态增加我不想做的宽度。

#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/

标签： htmlcssflexbox

解决方案

您不必设置精确的“固定”宽度，但尝试使用 %“按比例”设置宽度。

当所有 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>

推荐阅读