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进行救援。在下面的示例中，元素的宽度是固定的，它们之间的间隔是均匀分布的：

EventHubClient

SendAsync(…)

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

.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>

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

1 个答案: