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

Question

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

我包含了一个 JSFiddle link 来说明这个问题。

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 提供的更技术性的解释：

对齐项目用法

This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

合理使用内容

This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

JSFIDDLE