在 flexbox 布局中设置图像基线

Question

我正在尝试使用 flexbox 创建一个 multi-column 布局并对齐所有列中的基线。我使用 align-items: baseline 属性执行此操作。现在，当每列中的第一个元素是文本时，这很有效，例如：

CSS

.container {
  display: flex;
  align-items: baseline; 
}

.col-2 {
  width: 48%;
}

HTML

<div class='container'> 
  <div class='col-2'>
    <h2>Nullam eget metus suscipit, auctor diam quis, sagittis eros. Phasellus quis iaculis nisi.</h2>
  </div>
  <div class='col-2'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis nulla in elit hendrerit congue. Nullam eleifend, neque vitae finibus accumsan, augue dui lacinia leo, eget sagittis ipsum dui id leo.</p>
  </div>
</div>

我运行遇到的问题是当列中的第一个元素是图像时，如下所示：

<div class='container'> 
  <div class='col-2'>
    <h2>Nullam eget metus suscipit, auctor diam quis, sagittis eros. Phasellus quis iaculis nisi.</h2>
  </div>
  <div class='col-2'>
    <img src='https://c1.staticflickr.com/1/644/23373656961_9d6426d815_h.jpg'>
  </div>
</div>

第一列中的标题与第二列中图像的底部对齐。我想做的是更改图像基线，以便标题将移向列的顶部。我知道您可以通过将 align-items 属性设置为 flex-start 来解决此问题，但我更愿意保留 align-items 属性原样。这样，无论有多少列，文本基线都将始终对齐。

我的目标 - 弄清楚如何在不更改 .container class 的情况下调整图像基线。这可能吗？

这是一个代码笔，你可以用它来玩http://codepen.io/jonathink/pen/wMwgwZ

Answer 1

What I would like to do is change the image baseline so that the heading will move towards the top of the column.

My goal - figure out how to adjust the image baseline without changing the .container class. Is this possible?

您可以为图像创建 class，然后使用 align-self 属性仅调整图像的对齐方式。

来自你的codepen：

修订了HTML（在两处添加了.imageclass）

<div class='container'>
  <div class='col-2'>
    <h2>Nullam eget metus suscipit...</h2>
  </div>
  <div class='col-2'>
    <p>Lorem ipsum dolor sit amet, cons...</p>
  </div>
</div>
<div class='container'>
  <div class='col-2'>
    <h2>Nullam eget metus suscipit...</h2>
  </div>
  <div class='col-2 image'><!-- ADJUSTMENT HERE -->
    <img src='https://c1.staticflickr.com/1/644/23373656961_9d6426d815_h.jpg'>
  </div>
</div>
<div class='container'>
  <div class='col-3'>
    <h2>Nullam eget metus suscipit...</h2>
  </div>
  <div class='col-3'>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class='col-3 image'><!-- ADJUSTMENT HERE -->
    <img src='https://c1.staticflickr.com/1/644/23373656961_9d6426d815_h.jpg'>
  </div>
</div>

已修订 CSS（添加了一条规则）

.image { align-self: flex-end; }

Revised DEMO

在 flexbox 布局中设置图像基线

Set image baseline within a flexbox layout

html

css

flexbox