html - CSS flex 盒 : Is it possible to align paragraphs in the following setup?

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 时，只有直接子项是flex 元素。这意味着我们可以控制 .column，但不能控制列中的内容。
• 将 display:flex 添加到 .column 时，我们现在可以控制列的内容，但这没有多大用处，因为我们有三个独立的 flex 元素。

我得到的最接近的方法是将 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>