html – 在flexbox布局中设置图像基线

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

CSS

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

.col-2 {
  width: 48%;
}

HTML


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


第一列中的标题与第二列中图像的底部对齐.我想要做的是更改图像基线,以便标题将移动到列的顶部.我知道您可以通过将align-items属性设置为flex-start来解决此问题,但我更愿意保留align-items属性.这样,无论有多少列,文本基线都将始终对齐.
我的目标 – 弄清楚如何在不改变.container类的情况下调整图像基线.这可能吗？
这是一个可以玩http://codepen.io/jonathink/pen/wMwgwZ的编码器


最佳答案


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?

您可以为图像创建一个类,然后使用align-self属性仅调整图像的对齐方式.
从你的codepen：
修改HTML(在两个地方添加.Image类)


修改后的CSS(添加了一条规则)

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

Revised DEMO

html – 在flexbox布局中设置图像基线

相关文章