我有一个弹性盒子,里面有不同的东西.

enter image description here

当它换行到一个新行上时,我想将这个新行与FlexBox第一行上的第二个项目对齐,但是我想不出该怎么做.基于内部文本,元素的宽度将是动态的.

enter image description here

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>

推荐答案

您可以在父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如果你想玩代码.

Html相关问答推荐

放大缩小标题在外面的图像

在Chrome中使用手写笔时,滚动条方向反转

这<;td&>如何溢出<;表>;?

现代网络浏览器可以并行下载哪些类型的网络资源?还有,什么东西不能并行下载?

如何在R rmarkdown中创建循环中的分页表?

根据Tailwind CSS中的子计数而非子宽度进行对齐,并水平对齐

为什么要添加换行符(至少在 Google Chrome 中)

如果您将带有 html 标签的字符串数据(name : test) 放在 `

在 laravel 中使用 DomPDF 将数据导出为 pdf 时,第二列被拉伸

如何使用 Flutter 构建 Chrome 扩展?

Sass 混合动画未正确应用

对齐页面左侧的单选按钮

如何只为 Navbar 中的一个元素提供动画,其余元素没有使用 css 的动画

在shiny 的应用程序中使用图标功能时出错

使用 css 将内容居中并向左对齐?

如何通过可见文本使用 Selenium 定位元素

如何将 img 元素定位到特定位置?

使用 tailwind css 将 HTML/CSS/JS 站点转换为 React App

Bootstrap Grid System col 无法正常工作

从排列的 2 个网格到彼此下方的 2 个网格(响应性)