使用flexbox css对齐项目

Question

我需要将相同位置的红色div与可以占据多行或一行的不同标签对齐，但如果下一列或前一列包含蓝色div，则留下蓝色div的空格。

我怎样才能做到这一点？

https://codepen.io/aldozumaran/pen/zbWLpb

.main-flex {
  display: flex;
  flex-wrap: wrap;
}
.main-flex .item-flex {
  background: #ccc;
  display: flex;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
  flex: 1 1 45%;
}
.main-flex .item-flex label {
  flex: 1;
  margin-bottom: auto;
}
.main-flex .item-flex .input-flex {
  height: 40px;
  width: 100%;
  background: #f00;
}
.main-flex .item-flex .input-flex-2 {
  height: 40px;
  width: 100%;
  background: #00f;
}

<div class="main-flex ">
  <div class="item-flex bg-white">
    <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius </label>
    <div class="input-flex"></div>
  </div>
  <div class="item-flex  bg-white">
    <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius </label>
    <div class="input-flex"></div>
    <div class="input-flex-2"></div>
  </div>
  <div class="item-flex bg-white">
    <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, animi cum fuga fugit iusto laudantium libero minus molestias obcaecati officiis omnis quam quidem quod sit ut. At quasi rem vitae? </label>
    <div class="input-flex"></div>
    <div class="input-flex-2"></div>
  </div>
  <div class="item-flex bg-white">
    <label for=""> At quasi rem vitae? </label>
    <div class="input-flex"></div>
  </div>
  <div class="item-flex bg-white">
    <label for=""> At quasi rem vitae? </label>
    <div class="input-flex"></div>
  </div>
  <div class="item-flex bg-white">
    <label for=""> At quasi rem vitae? </label>
    <div class="input-flex"></div>
  </div>
</div>

Answer 1

红色div必须灵活/敏感吗？

一种方法是将div留在那里，但只删除颜色：

<div class="main-flex ">
   <div class="item-flex bg-white">
       <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius </label>
       <div class="input-flex"></div>
       <div class="input-flex-2" style="background: none"></div>
   </div>
   <div class="item-flex  bg-white">
       <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius </label>
       <div class="input-flex"></div>
       <div class="input-flex-2"></div>
  </div>
  <div class="item-flex bg-white">
       <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, animi cum fuga fugit iusto laudantium libero minus molestias obcaecati officiis omnis quam quidem quod sit ut. At quasi rem vitae? </label>
       <div class="input-flex"></div>
       <div class="input-flex-2"></div>
  </div>
  <div class="item-flex bg-white">
       <label for=""> At quasi rem vitae? </label>
       <div class="input-flex"></div>
       <div class="input-flex-2" style="background: none"></div>
  </div>

CSS没有改变。

Answer 2

您可以考虑在红色底部边缘上使用蓝色div上的负边距进行整理

.main-flex {
  display: flex;
  flex-wrap: wrap;
}
.main-flex .item-flex {
  background: #ccc;
  display: flex;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
  flex: 1 1 45%;
}
.main-flex .item-flex label {
  flex: 1;
  margin-bottom: auto;
}
.main-flex .item-flex .input-flex {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-bottom:40px;
}
.main-flex .item-flex .input-flex-2 {
  margin-top:-40px;
  height: 40px;
  width: 100%;
  background: #00f;
}

<div class="main-flex ">
  <div class="item-flex bg-white">
    <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius </label>
    <div class="input-flex"></div>
  </div>
  <div class="item-flex  bg-white">
    <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius </label>
    <div class="input-flex"></div>
    <div class="input-flex-2"></div>
  </div>
  <div class="item-flex bg-white">
    <label for="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid animi aperiam atque consequatur corporis dolor eius Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, animi cum fuga fugit iusto laudantium libero minus molestias obcaecati officiis omnis quam quidem quod sit ut. At quasi rem vitae? </label>
    <div class="input-flex"></div>
    <div class="input-flex-2"></div>
  </div>
  <div class="item-flex bg-white">
    <label for=""> At quasi rem vitae? </label>
    <div class="input-flex"></div>
  </div>
  <div class="item-flex bg-white">
    <label for=""> At quasi rem vitae? </label>
    <div class="input-flex"></div>
  </div>
  <div class="item-flex bg-white">
    <label for=""> At quasi rem vitae? </label>
    <div class="input-flex"></div>
  </div>
</div>