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

Question

在我们开始之前：请注意，我使用了不带前缀的spec 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>