使div在行中高度相等，并使文本垂直居中与Flexbox对齐

Question

如何确保每张卡的高度相等，同时保持文字垂直居中？

我已经包含了一个JSFiddle链接来说明问题。

HTML

<div class="homepage__recent-story">
    <div class="recent-story__card">
        <p style="text-align: center">Title</p>
        <p style="text-align: center">Caption</p>
    </div>
    <div class="recent-story__card">
        <p style="text-align: center">Test alsdj lak djlaksj dlaksd jlaksd js alsjdlkajsd lakjsd lasjd alksdj aljd alksjd alkdjs alkjsd alsjd lajd lakjd lasjdalsjd alkdj alkjd alsdj alksdj.</p>
        <p style="text-align: center">Test alsdj lak djlaksj dlaksd jlaksd js alsjdlkajsd lakjsd lasjd alksdj aljd alksjd alkdjs alkjsd alsjd lajd lakjd lasjdalsjd alkdj alkjd alsdj alksdj.</p>
    </div>
    <div class="recent-story__card">
        <p style="text-align: center">Test</p>
    </div>
    <div class="recent-story__card">
        <p style="text-align: center">Test</p>
    </div>
</div>

CSS

.homepage__recent-story{
  background-color: red;
  margin: 0 0 0 0;
  padding: 42px;
  border-top: 1px solid grey;
  overflow-y: auto;
  overflow-x: scroll;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.recent-story__card{
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: white;
  border-radius: 4px;
  padding: 24px;
  box-sizing: border-box;
  max-width: 300px;
  min-width: 300px;
  color: black;
  box-shadow: 0 0 12px rgba(0,0,0,.03);
}

的jsfiddle

http://jsfiddle.net/tsnpavme/4/

Answer 1

您需要删除以下行：

align-items: center;

并添加以下内容：

justify-content:center;

您的课程应如下：

.homepage__recent-story{
  background-color: red;
  margin: 0 0 0 0;
  padding: 42px;
  border-top: 1px solid grey;
  overflow-y: auto;
  overflow-x: scroll;
  display: flex;
  flex-wrap: nowrap;
  /* align-items: center; <--- removed */
}

.recent-story__card{
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: white;
  border-radius: 4px;
  padding: 24px;
  box-sizing: border-box;
  max-width: 300px;
  min-width: 300px;
  color: black;
  box-shadow: 0 0 12px rgba(0,0,0,.03);
  justify-content:center; /* Added */
}

following提供的更为技术性的解释：

对齐项目用法

  

这定义了如何沿当前行的横轴布置弹性项目的默认行为。可以将其视为横轴（垂直于主轴）的对齐内容版本。

证明内容使用

  

这定义了沿主轴的对齐方式。当线路上的所有弹性项目都不灵活，或者灵活但已达到其最大尺寸时，它有助于分配剩余的额外空闲空间。当物品溢出线时，它还会对物品的对齐施加一些控制。

JSFIDDLE