Question

我想让flex项包含堆叠元素。我知道我可以在第一个flex项目中使用包装div，并使用display: block属性添加内容。

然而，我正在使用Angular的ng-repeat，我需要Flex容器内的所有项目都是兄弟姐妹。

这是我到目前为止http://jsbin.com/puhoma/edit?html,css,output的简单演示。我希望橙色盒子和浅绿色盒子能够靠得更近。

* {
  box-sizing: border-box;
}
.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex > div {
  background: red;
  flex: 1 0 33%;
  text-align: center;
  padding: 10px;
  max-width: 30%;
}
.flex > div:first-child {
  background-color: orange;
  flex: 0 0 100%;
  height: 10%;
}
.flex > div:last-child {
  background-color: aqua;
  position: relative;
  top: 1;
}

<body>
  <div class="flex">
    <div>orange box and aqua box need to take up one row together</div>
    <div>Hellothis is a long test sentence this is a long test sentence this is a long test sentence this is a long test is a long test sentence this is a long test sentence this is a long test sentence this is a long test</div>
    <div>Hello 2this is a long test sentence this is a</div>
    <div class="hi">Get me closer to Mr. Orange</div>
  </div>
</body>

Answer 1

正如您对原始帖子的评论中所提到的，flexbox在这种情况下不是理想的方式，但如果你真的想因任何原因使用flexbox来做，你可以设置{{1使用负值使水箱更接近橙色。

margin-top

* {
  box-sizing: border-box;
}
.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex > div {
  background: red;
  flex: 1 0 33%;
  text-align: center;
  padding: 10px;
  max-width: 30%;
}
.flex > div:first-child {
  background-color: orange;
  flex: 0 0 100%;
  height: 10%;
}
.flex > div:last-child {
  background-color: aqua;
  position: relative;
  top: 1;
  margin-top: -55px;
}

Flexbox，如何让其中一个flex项包含两行

1 个答案: