如何在CSS中纵向和横向对齐？

Question

我有一个这样的盒子:

<section class="notes-list-box">
    <div class="nn">
        <div class="heading">Notes</div>
        <div class="boxdescription">With our complete study notes, your homework is much easier.</div>
    </div>
    <div class="ttn">
        <div class="heading">Things To Know</div>
        <div class="boxdescription">Things to know provides additional information on every topic which enhance the knowledge of  the students.</div>
    </div>
    <div class="vdos">
        <div class="heading">Videos</div>
        <div class="boxdescription">Reference videos on each topic provides experimental ideas and develops interactive learning technique.</div>
    </div>
    <div class="sqaa">
        <div class="heading">Solved Question and Answer</div>
        <div class="boxdescription">With 100's of solved questions solved, now you can easily prepare your exam for free.</div>
    </div>
</section>

添加一点样式使它看起来像这样:

我试过这样使用vertical-align:

.notes-list-box > div {
  vertical-align: top;
}

它的工作原理.但我不知道如何align vertical at bottom使所有的空白区域也降到最低点.

所以下面的白色空间注释并解决问题和答案white background直到底部.

我想用空白填补这些空白:

Answer 1

使用弹性盒。

我使用了这个CSS：

.notes-list-box {
  display: flex;
  font-family: sans-serif;
}
.notes-list-box > div {
  margin: 0 5px;
  background-color: white;
}
.heading {
  color: white;
  font-weight: bold;
  padding: 10px 2px;
  text-align: center;
}
.boxdescription {
  padding: 5px;
}
.nn .heading {
  background-color: #61B5DF;
}
.ttn .heading {
  background-color: #41AF43;
}
.vdos .heading {
  background-color: #FF8A00;
}
.sqaa .heading {
  background-color: #FF1F2D;
}

查看JSfiddle上的结果。