我正在尝试使用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：
