Question

在所有项目之间设置任何数量的项目的任何数量的行的最动态方式是什么？现在唯一对我有用的是将每个项目包装在包装器中，将flex基础设置为包装器和子项的边距。这个问题是我失去了让每行与行中最高内容相同高度的能力。

案例1：只有保证金底部 https://jsfiddle.net/6oaney4e/6/

这很有效，因为内容保持每行上最高项目的高度

HTML

<div class="wrapper">
  <div class="item">
  text
  </div>
  <div class="item">
  text
  <br>
  line2
  </div>
  <div class="item">
  text
  </div>
  <div class="item">
  text
  </div>
</div>

CSS

.wrapper{
  display: flex;
  flex-flow: row wrap;
  margin: -10px;
  padding: 10px;
  background: green;
}
.item{
  flex: 0 0 50%;
  background: orange;
  margin-bottom: 10px;
}

案例2：所有边缘 https://jsfiddle.net/6oaney4e/7/

由于某种原因，这些行打破我猜测是因为行不能适应这些项目并且边缘有额外的边距。

html与CASE 1相同

CSS

.wrapper{
  display: flex;
  flex-flow: row wrap;
  margin: -10px;
  padding: 10px;
  background: green;
}
.item{
  flex: 0 0 50%;
  background: orange;
  margin: 10px;
}

案例3：包装物品并为内部物品添加保证金 https://jsfiddle.net/6oaney4e/8/

虽然有效，但现在每排的物品都没有真正意识到彼此，并且不能达到相同的高度。

HTML

<div class="wrapper">
  <div class="item-wrap">
  <div class="item">
  text
  </div>
  </div>
  <div class="item-wrap">
  <div class="item">
  text
  <br>
  line2
  </div>
  </div>
  <div class="item-wrap">
  <div class="item">
  text
  </div>
  </div>
  <div class="item-wrap">
  <div class="item">
  text
  </div>
  </div>
</div>

CSS

.wrapper{
  display: flex;
  flex-flow: row wrap;
  margin: -10px;
  padding: 10px;
  background: green;
}
.item-wrap{
  flex: 0 0 50%;
}
.item{
  background: orange;
  margin: 10px;
}

有没有一种方法可以像在CASE 1中那样保留HTML（没有div.item-wrap），让每行上的项目与CASE 1中的项目具有相同的高度，并使间距像CASE 3中那样工作吗

Answer 1

理想情况下，你确实想要使用行并使.item-wrap divs也是flex-parents。

＆＃13;

.wrapper {
  display: flex;
  flex-flow: row wrap;
  margin: -10px;
  padding: 10px;
  background: green;
}

.item-wrap {
  flex: 0 0 50%;
  display: flex;
}

.item {
  background: orange;
  margin: 10px;
  flex: 1;
}

＆＃13;

<div class="wrapper">
  <div class="item-wrap">
    <div class="item">
      text
    </div>
  </div>
  <div class="item-wrap">
    <div class="item">
      text
      <br> line2
    </div>
  </div>
  <div class="item-wrap">
    <div class="item">
      text
      <br> line2
      <br> line3
    </div>
  </div>
  <div class="item-wrap">
    <div class="item">
      text
    </div>
  </div>
</div>

＆＃13;

然而如果必须保留现有结构，则您需要使用calc来调整flex-basis。像这样：

＆＃13;

.wrapper {
  display: flex;
  flex-flow: row wrap;
  background: green;
  justify-content: space-between;
}

.item {
  flex-grow:0;
  flex-shrink:0;
  flex-basis:calc(50% - 10px); /* separate properties for IE11 upport */
  background: orange;
  margin: 5px;
}

＆＃13;

<div class="wrapper">
  <div class="item">
    text
  </div>
  <div class="item">
    text
    <br> line2
  </div>
  <div class="item">
    text
    <br> line2
    <br> line3
  </div>
  <div class="item">
    text
  </div>
</div>

＆＃13;

包裹物品之间的Flex Row空间

1 个答案: