CSS使用换行将项对齐到结尾
我有一个固定宽度的容器，我想显示一个动态数量的相同大小的项目，应该对齐到容器的右侧。
当项目太多时，它们应该换行成多行。但是，我希望底部的线条完全填充，最上面的线条与剩余的空间。
null
如果可能的话，我如何用CSS规则生成所需的位置？
可以假定HTML是非常基本的：
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<!-- ... -->
<div class="item">N</div>
</div>
注意：所有的项目都有相同的尺寸，我只是没有在图像中准确地绘制它们。
共有1个答案
这里的关键是使用flex-wrap:wrap-reverse
下面是codepen的现场演示：https://codepen.io/lefanous/pen/eybwarz
我还将链接到https://css-tricks.com/snippets/css/a-guide-to-flexbox/，这是关于CSS中flex-box的完整指南。
-
问题内容： 是否可以使两个项目与flexbox左对齐，而使一个项目与flexbox右对齐？该链接显示得更清楚。最后一个例子是我想要实现的。 在flexbox中，我有一块代码。使用float时，我有四个代码块。这就是为什么我更喜欢flexbox的原因之一。 HTML CSS 问题答案： 要将一个flex子项向右对齐，请设置为 从flex规范： 主轴上自动边距的一种用法是将弹性项目分成不同的“组”。下
-
我有一个元素，它被包装在较小的屏幕中，如何使用CSS使包装的文本对齐自己？ 这就是我想要的
-
问题内容： 我有一个容器div，其中有一个固定的，并带有。 我想要水平行的float：此容器内的div左。左浮动的Divs在读取其父级的右边界后自然会推到下面的“行”上。即使父级的不允许这样做，也会发生这种情况。这是这样的样子： ！[错误] [1]- 删除了已被广告替换的图片棚屋图片 我希望它看起来如何： ！[右] [2]- 删除了已被广告替换的图片棚屋图片 注意：我想要的效果可以通过使用内联元素
-
如何将弹性项向右对齐？ 它的输出类似于 我正在寻找
-
问题内容： 我有一些孩子： 我想要以下布局： 无论文本中有多少文本，我都希望始终将其始终停留在底部，而不会将其从流程中移出。我听说这可以通过Flexbox实现，但我无法使其正常工作。 问题答案： 您可以使用自动边距 在通过和对齐之前，任何正的自由空间都会分配给该维度中的自动边距。 因此，您可以使用以下一种（或两种）： 或者，您可以在增长之前使元素填充可用空间：
-
问题内容： 我在浮动div中有一个img，但我不知道如何垂直居中。 垂直对齐：当然中间不起作用。 问题答案： 要在父元素中垂直对齐文本，并谨记的是一个内联元素等行为 类似 文本，你可以简单地设置到父元素： 。