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>

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

1 个答案: