将内联块项与容器的左边缘和右边缘对齐

Question

这有点难以解释我想做什么，但我会尽力而为。

• 我有 X 个类别。
• 我想将每个类别放在一个带有灰色边框的框中。
• 我想将类别框显示为"内联块"，从左到右。
• 可能有1,2,3,4,5....跨页面，具体取决于用户的屏幕大小。
• 我希望位于左侧的盒子正靠容器的左侧。 我希望位于右侧的盒子正好靠在容器的右侧。

这样：

.container {
width: 100%;
}
.category {
width: 100px;
display: inline-block;
border: 1px solid grey;
}

<div class="container">
<div class="category">Category 1</div>
<div class="category">Category 2</div>
<div class="category">Category 3</div>
<div class="category">Category 4</div>
<div class="category">Category 5</div>
<div class="category">Category 6</div>
</div>

如果我要更改：

.container {
column-count:4; 
}

这达到了我正在寻找的效果。 但是 - 它们在屏幕上不再按顺序排列。类别显示顶部>底部，而不是左右>。

Answer 1

Flexbox 来救援。在下面的示例中，元素的宽度是固定的，它们之间的空间均匀分布：

.container {
margin: 1em 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.category {
border: 1px solid gray;
width: 100px;
}

<div class="container">
<div class="category">Category 1</div>
<div class="category">Category 2</div>
<div class="category">Category 3</div>
<div class="category">Category 4</div>
<div class="category">Category 5</div>
<div class="category">Category 6</div>
</div>
<div class="container">
<div class="category">Category 1</div>
<div class="category">Category 2</div>
<div class="category">Category 3</div>
</div>
<div class="container">
<div class="category">Category 1</div>
<div class="category">Category 2</div>
</div>

在以下示例中，元素是流体宽度，它们之间的空间是固定的：

.container {
margin: 1em 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.category {
margin: 0 1em;
border: 1px solid gray;
width: calc(25% - 2em - 2px);
}

<div class="container">
<div class="category">Category 1</div>
<div class="category">Category 2</div>
<div class="category">Category 3</div>
<div class="category">Category 4</div>
<div class="category">Category 5</div>
<div class="category">Category 6</div>
</div>
<div class="container">
<div class="category">Category 1</div>
<div class="category">Category 2</div>
<div class="category">Category 3</div>
</div>
<div class="container">
<div class="category">Category 1</div>
<div class="category">Category 2</div>
</div>