CSS Flexbox：是否可以在以下设置中对齐段落？

Question

在我们开始之前：请注意，我使用了无前缀的规范 flexbox 语法，所以要查看 flexbox 的工作情况，请查看 Chrome 中的示例（或者 Firefox 应该也可以工作）。

举个例子，一个简单的三列网格系统：

/**
 * Makeshift reset
 */
* { margin: 0; padding: 0; }
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/**
 * The Grid
 */
.grid {
  outline: 1px solid blue;
  margin-left: -24px;
}

/* Clearfix */
.grid:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  outline: 1px solid red;
  float: left;
  padding-left: 24px;
  width: 33.333%;
}

<div class="grid">
    <div class="column">
        <h2>Some Headline</h2>
        <p>Left column</p>
    </div>
    
    <div class="column">
        <h2>Short</h2>
        <p>Center column</p>
    </div>
    
    <div class="column">
        <h2>Another random headline</h2>
        <p>Right column</p>
    </div>
</div>

由于列的内容高度不同，列的高度不相等——标准 CSS 问题。

现在有了 Flexbox，通过将 display: flex; 添加到网格中来解决这个问题相当容易：

.grid {
  display: flex;
  outline: 1px solid blue;
  margin-left: -24px;
}

/**
 * Makeshift reset
 */
* { margin: 0; padding: 0; }
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/**
 * The Grid
 */
.grid {
  display: flex;
  outline: 1px solid blue;
  margin-left: -24px;
}

/* Clearfix */
.grid:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  outline: 1px solid red;
  float: left;
  padding-left: 24px;
  width: 33.333%;
}

<div class="grid">
    <div class="column">
        <h2>Some Headline</h2>
        <p>Left column</p>
    </div>
    
    <div class="column">
        <h2>Short</h2>
        <p>Center column</p>
    </div>
    
    <div class="column">
        <h2>Another random headline</h2>
        <p>Right column</p>
    </div>
</div>

现在列高相等，但是段落的第一行没有对齐，所以看起来还是有点破。

当然，我自己也试过，但遇到了各种问题：

• 将display:flex 添加到.grid 时，只有直接子项是弹性项目。这意味着我们可以控制.column，但不能控制列内的内容。
• 将display:flex 添加到.column 时，我们现在可以控制列内容，但这并没有多大用处，因为我们有三个独立的弹性项目。

我得到的最接近的方法是将align-items: flex-end 添加到.grid，但它看起来仍然损坏，只是有点不同：

/**
 * Makeshift reset
 */
* { margin: 0; padding: 0; }
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/**
 * The Grid
 */
.grid {
  display: flex;
  align-items:flex-end;
  outline: 1px solid blue;
  margin-left: -24px;
}

/* Clearfix */
.grid:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  outline: 1px solid red;
  float: left;
  padding-left: 24px;
  width: 33.333%;
}

<div class="grid">
    <div class="column">
        <h2>Some Headline</h2>
        <p>Left column</p>
    </div>
    
    <div class="column">
        <h2>Short</h2>
        <p>Center column</p>
    </div>
    
    <div class="column">
        <h2>Another random headline</h2>
        <p>Right<br>column</p>
    </div>
</div>

有什么办法可以解决吗？

Answer 1

你可以试试添加

.column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/**
* Makeshift reset
*/
* { margin: 0; padding: 0; }
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/**
* The Grid
*/
.grid {
  display: flex;
  outline: 1px solid blue;
  margin-left: -24px;
}

/* Clearfix */
.grid:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  outline: 1px solid red;
  float: left;
  padding-left: 24px;
  width: 33.333%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<div class="grid">
    <div class="column">
        <h2>Some Headline</h2>
        <p>Left column</p>
    </div>
    
    <div class="column">
        <h2>Short</h2>
        <p>Center column</p>
    </div>
    
    <div class="column">
        <h2>Another random headline</h2>
        <p>Right column</p>
    </div>
</div>

或者

.column {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}
.column > h2 {
  flex-grow: 1;
}

/**
* Makeshift reset
*/
* { margin: 0; padding: 0; }
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/**
* The Grid
*/
.grid {
  display: flex;
  outline: 1px solid blue;
  margin-left: -24px;
}

/* Clearfix */
.grid:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  outline: 1px solid red;
  float: left;
  padding-left: 24px;
  width: 33.333%;
  display: flex;
  flex-direction: column;
}
.column > h2 {
  flex-grow: 1;
}

<div class="grid">
    <div class="column">
        <h2>Some Headline</h2>
        <p>Left column</p>
    </div>
    
    <div class="column">
        <h2>Short</h2>
        <p>Center column</p>
    </div>
    
    <div class="column">
        <h2>Another random headline</h2>
        <p>Right column</p>
    </div>
</div>

或者

.column {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}
.column > h2 {
  margin-bottom: auto;
}

/**
* Makeshift reset
*/
* { margin: 0; padding: 0; }
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/**
* The Grid
*/
.grid {
  display: flex;
  outline: 1px solid blue;
  margin-left: -24px;
}

/* Clearfix */
.grid:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  outline: 1px solid red;
  float: left;
  padding-left: 24px;
  width: 33.333%;
  display: flex;
  flex-direction: column;
}
.column > h2 {
  margin-bottom: auto;
}

<div class="grid">
    <div class="column">
        <h2>Some Headline</h2>
        <p>Left column</p>
    </div>
    
    <div class="column">
        <h2>Short</h2>
        <p>Center column</p>
    </div>
    
    <div class="column">
        <h2>Another random headline</h2>
        <p>Right column</p>
    </div>
</div>