如何开始一个新行并将换行符与 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.

所以，真正的问题是：如何在发生换行时 re-arrange 伸缩项目？

由于 HTML 和 CSS 本身拥有 ，因此他们无法控制这种情况。您必须使用媒体查询或 JavaScript.

来处理它

一旦您选择了检测包裹的方法，您可以使用 order 属性 来 re-arrange 项目。

Answer 2

为间距创建一个虚拟元素

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;
}

.hideme{
   visibility:invisible;
   background-color:white;
   border:none;
   }

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

Answer 3

您可以在父 div 中创建两个 div，一个包含唯一元素，另一个包含通用子元素。这就是你如何得到分离

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

如图所示设置 CSS 的样式。注意 .unique-wrapper 有 flex: 3 因为你将元素的宽度设置为 30%.

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

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

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

.unique-wrapper, .child-wrapper {
  border: none;
  margin: 0;
}

.unique-wrapper {
  flex: 3;
}

.child-wrapper {
  flex: 7;
  display: flex;
  flex-wrap: wrap;
}

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

这是我的 codepen 如果你想玩代码。

Answer 4

扩展@MichaelBenjamin 的精彩回答：

Since HTML and CSS, by themselves, have , they have no control of this situation. You have to handle it, either with media queries or JavaScript.

您可以通过设置新的父元素并将唯一元素嵌套为第一个子元素来解决此问题。将这个新的 master-parent 设置为 display: flex;.

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%;
  height: 27px;
  padding: 10px 10px 10px 10px;
}

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

.master-parent {
  display: flex;
  width: 400px;
}

<div class="master-parent">
  <div class="unique_element">First</div>
  <div class="parent">

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