如何开始一个新行并将换行符与 Flexbox 中的另一个项目对齐？

发布于 2025-01-09 09:54:33 字数 1170 浏览 3 评论 0原文

我有一个弹性盒子，里面有不同的物品。

当它换行到新行时，我想将此新行与弹性盒第一行的第二项对齐，但我不知道如何执行此操作。元素的宽度将根据内部文本而动态变化。

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>

原文

I have a flexbox with different items inside.

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, but I can't figure out how to do this. The width of the elements will be dynamic, based on the text inside.

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

静谧幽蓝 2025-01-16 09:54:33

当它换行到新行时，我想将此新行与弹性盒第一行的第二项对齐。

因此，真正的问题是：在发生换行时如何重新排列 Flex 项目？

由于 HTML 和 CSS 本身具有没有元素何时换行的概念，他们无法控制这种情况。您必须使用媒体查询或 JavaScript 来处理它。

选择检测换行的方法后，您可以使用 order 属性重新排列项目。

回复收藏 0 原文

你好，陌生人 2025-01-16 09:54:33

扩展@MichaelBenjamin 的精彩答案：

由于 HTML 和 CSS 本身具有没有元素何时换行的概念，他们无法控制这种情况。您必须使用媒体查询或 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>

To expand on @MichaelBenjamin's fantastic answer:

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

You can work around this by setting a new parent element and nest the unique element as the first child. Set this new master-parent to 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>

回复收藏 0 原文

江南月 2025-01-16 09:54:33

您可以在父 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。

You can create two divs inside the parent div, one that holds the unique element and one that holds generic children. That's how you get the separation

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

Style the CSS as shown. Note .unique-wrapper has flex: 3 because you set the width of the element as 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;
}

Here is my codepen if you want to play with the code.

回复收藏 0 原文

那请放手 2025-01-16 09:54:33

创建一个用于间距的虚拟元素

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>

create a dummy element for spacing

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>

回复收藏 0 原文

~没有更多了~