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>

将项目与Flexbox CSS对齐

2 个答案: