元素对齐：删除边距，修饰符类不起作用

Question

我有一个装有两个盒子的包装盒。这些盒子是彼此的。在框中有标题（可选）和内容。我有两个案例。 第一种情况：其中一个盒子有一个标题，另一个没有。 第二种情况：两个方框都有标题。如果您查看第二种情况的示例（两个标题），框和标题将在包装器的底部对齐，标题也会对齐。第一种情况也有一个例子（一个没有标题的盒子）。由于缺少标题，对齐方式尚不正确。以下是问题的屏幕截图：

所以我尝试的是，找出第一个案例的丢失空间，即21px。在此之后，我在CSS中选择第二个框并添加缺少的空间。对于同时具有两个标题的第二种情况，我尝试在框中添加修饰符类并删除margin-top。因此默认情况下，如果没有标题（此标题是可选的），则第二个框上会有一个空格，如果两个标题都可用，则类应该再次删除它。这是代码的一部分：

.box + .box {
  margin-top: 21px;
}

.box--with-title {
  margin-top: 0;
}

现在有了我的想法它不起作用。第一个案例已经解决，但是我的班级没有删除保证金。所以现在第二种情况的对齐是错误的。任何想法如何解决该类正在删除保证金或是否有更好的方式与纯CSS做这个？希望这很清楚。

.wrapper {
  display: flex;
  justify-content: space-betweet;
  width: 500px;
  background-color: lightgray;
  ;
  margin-top: 36px;
}

.box {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.box__content {
  width: 120px;
  height: 100px;
  background-color: lightcoral;
}

.box+.box {
  margin-top: 21px;
}

.box--with-title {
  margin-top: 0;
}

<div class="wrapper">
  <div class="box">
    <h3>I have a title!</h3>
    <div class="box__content"></div>
  </div>

  <div class="box">
    <h3></h3>
    <div class="box__content"></div>
  </div>
</div>

<div class="wrapper">
  <div class="box">
    <h3>I have a title!</h3>
    <div class="box__content"></div>
  </div>

  <div class="box box--with-title">
    <h3>I have also a title!</h3>
    <div class="box__content"></div>
  </div>
</div>

Answer 1

只需在容器上使用align-items:flex-end，无需考虑保证金：

  

flex-end

     

弹性项目的跨端边缘使用   线的交叉边缘。 ^ref

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items:flex-end;
  width: 500px;
  background-color: lightgray;
  ;
  margin-top: 36px;
}

.box {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.box__content {
  width: 120px;
  height: 100px;
  background-color: lightcoral;
}

<div class="wrapper">
  <div class="box">
    <h3>I have a title!</h3>
    <div class="box__content"></div>
  </div>

  <div class="box">
    <div class="box__content"></div>
  </div>
</div>

<div class="wrapper">
  <div class="box">
    <h3>I have a title!</h3>
    <div class="box__content"></div>
  </div>

  <div class="box box--with-title">
    <h3>I have also a title!</h3>
    <div class="box__content"></div>
  </div>
</div>

顺便说一下，你的初始代码几乎是好的，你只是面临一个特殊性问题，这使得.box--with-title的规则得不到考虑。你可以这样做：

.wrapper {
  display: flex;
  justify-content: space-betweet;
  width: 500px;
  background-color: lightgray;
  ;
  margin-top: 36px;
}

.box {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.box__content {
  width: 120px;
  height: 100px;
  background-color: lightcoral;
}

.box+.box {
  margin-top: 21px;
}

.box.box--with-title {
  margin-top: 0;
}

<div class="wrapper">
  <div class="box">
    <h3>I have a title!</h3>
    <div class="box__content"></div>
  </div>

  <div class="box">
    <h3></h3>
    <div class="box__content"></div>
  </div>
</div>

<div class="wrapper">
  <div class="box">
    <h3>I have a title!</h3>
    <div class="box__content"></div>
  </div>

  <div class="box box--with-title">
    <h3>I have also a title!</h3>
    <div class="box__content"></div>
  </div>
</div>