当博客标题长度不同时，如何使用flexbox将元素排成一行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当博客标题长度不同时，如何使用flexbox将元素排成一行相关的知识，希望对你有一定的参考价值。
我正在尝试创建一个博客页面，显示每个博客的缩略图，标题，日期和类别。由于博客标题不同，元素排列不正确。理想情况下，我希望日期，类别和阅读更多按钮与邻近的博客列表水平对齐。但是，如果不可能的话，我也会满足于在底部对齐更多按钮。我附上了一张图片来显示错位。
<div class="flex-container">
<article>
<img />
<h2>title</h2>
<p>date</p>
<p>category 1, category 2</p>
<a>read more</a>
</article>
</div>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap; }
article {
width: 50%;
}
image showing elements not lining up properly due to one long blog title
答案
使article元素也可以弯曲，然后通过将margin:auto应用于margin-bottom: auto，简单地将h2的“魔法”与flexbox结合使用：
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap; }
article {
display: flex;
flex-direction: column;
width: 50%;
}
article h2 {
margin-bottom: auto;
}<div class="flex-container">
<article>
<img />
<h2>title</h2>
<p>date</p>
<p>category 1, category 2</p>
<a>read more</a>
</article>
<article>
<img />
<h2>really<br>long<br>title</h2>
<p>date</p>
<p>category 1, category 2</p>
<a>read more</a>
</article>
</div>另一答案
将class="title"添加到您的标题中
<h2 class="title">title</h2>
添加css仅限标题为2行
.title {
display: -webkit-box;
-webkit-line-clamp: 2; //you can change as per need
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
以上是关于当博客标题长度不同时，如何使用flexbox将元素排成一行的主要内容，如果未能解决你的问题，请参考以下文章
当其他元素居中对齐时，使用 Flexbox 将页脚与页面底部对齐