html - 如何开始一个新行并将换行符与 flexbox 中的另一个元素对齐？

Question

我有一个 flexbox，里面有不同的元素。

当它换行时，我想将这条新行与 flexbox 第一行的第二个元素对齐，但我不知道该怎么做。元素的宽度将根据内部文本动态变化。

div {
  font-family: arial, sans-serif; 
  margin: 5px;
  color: white;
  border: 1px dotted black;
}

.parent { 
  display: flex;
  flex-wrap: wrap;
  width: 300px;
}

.unique_element {
  background-color: Crimson;
  width: 30%;
  padding: 10px 10px 10px 10px;
}

.child {
  background-color: CornflowerBlue;
  padding: 10px 10px 10px 10px;
}

<div class="parent">
  <div class="unique_element">First</div>
  <div class="child">Second</div>
  <div class="child">Third</div>
  <div class="child">Fourth</div>
  <div class="child">Fifth</div>
</div>

Answer 1

When it wraps onto a new line I want to align this new line with the 2nd item on the first row of the flexbox.

因此，真正的问题是:发生换行时如何重新排列 flex 元素？

因为 HTML 和 CSS 本身有 no concept of when elements wrap ，他们无法控制这种情况。您必须使用媒体查询或 JavaScript 来处理它。

一旦选择了检测换行的方法，就可以使用 order 属性重新排列元素。