Flex wrap - 定位元素答案

【问题标题】：Flex wrap - positioning elementsFlex wrap - 定位元素
【发布时间】：2025-11-30 13:55:02
【问题描述】：

我有以下设计要求：

这就是我目前所取得的成果：

使用 flex-wrap 时如何控制元素的定位？请注意，最后一行的元素应该像上面那样定位。

这是我的代码：

.codes-card {
  width: 374px;
  height: 198px;
  padding: 24px 80px;
}

.codes-card-inner {
  max-width: 200px;
  max-height: 174px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

<div class="card codes-card">
  <div class="codes-card-inner">
    <span *ngFor="let authCode of authCodes" class="text-blue-300 regular-txt subtitle mb-2">teste</span>
  </div>
</div>

【问题讨论】：

听起来你不应该在这里开始使用 flexbox，而是 developer.mozilla.org/en-US/docs/Web/CSS/columns
或table 似乎更合适

标签： css flexbox

【解决方案1】：

将您的 flex-direction 更改为 row 并删除 justify 和 align 内容。如果您只想要每行 2 个，则将跨度的宽度设为 50%。这也允许容器的动态高度

.codes-card {
  width: 374px;
  padding: 24px 80px;
}

.codes-card-inner {
  max-width: 200px;
  max-height: 174px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.codes-card-inner>span {
  width: 50%;
  text-align: center;
}

<div class="card codes-card">
  <div class="codes-card-inner">
    <span class="text-blue-300 regular-txt subtitle mb-2">teste</span>
    <span class="text-blue-300 regular-txt subtitle mb-2">teste</span>
    <span class="text-blue-300 regular-txt subtitle mb-2">teste</span>
    <span class="text-blue-300 regular-txt subtitle mb-2">teste</span>
    <span class="text-blue-300 regular-txt subtitle mb-2">teste</span>
    <span class="text-blue-300 regular-txt subtitle mb-2">teste</span>
    <span class="text-blue-300 regular-txt subtitle mb-2">teste</span>
    <span class="text-blue-300 regular-txt subtitle mb-2">teste</span>
    <span class="text-blue-300 regular-txt subtitle mb-2">teste</span>
    <span class="text-blue-300 regular-txt subtitle mb-2">teste</span>
  </div>
</div>

【讨论】：

【解决方案2】：

使用带有 no-wrap 值的 flex-wrap，它会强制元素停留在一行，并且使用 wrap 值，如果元素太大而不能留在一行，它将把元素放在多行上。

但在您的代码中，您只在容器中获得了一张“teste”卡...

【讨论】：