Question

如果第一行中的元素较长，那么我会在第二行中看到此间隙。我想将第二行中的项目与顶部对齐（弹性启动）。顺便说一句，如果我更改：

flex-wrap: wrap-reverse;
align-items: flex-end;

这项工作很完美，但是这里的订单对我来说很重要。

这个较长的文本可以出现在每个flex项目中，因此解决方案应该具有弹性。

.flex-wrapper {
  background: red;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
  text-align: center;
}

.flex-item {
  flex-basis: 50%;
  background: blue;
}

<div class="flex-wrapper">
  <div class="flex-item" style="color:white">Long Title 1<br/>with some text<br/>and extra text</div>
  <div class="flex-item">Normal Item 2</div>
  <div class="flex-item">Normal Item 3</div>
  <div class="flex-item">Normal Item 4</div>
  <div class="flex-item">Normal Item 5</div>
  <div class="flex-item">Normal Item 6 </div>
</div>

已编辑：

我还需要将行除以50％，所以我不能删除flex-wrap：wrap;

EDITED2：

好的，谢谢您的链接。我发现这在flexbox中是不可能的。

每一个帮助我都会感激

Flexbox，如果第一行中的内容较长，则将项目对齐到第二行的顶部

0 个答案: