本文介绍了如何对齐框项以使按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要对齐按钮，但2行文本使其与1行文本不同。有人能帮帮我吗？
推荐答案
如果在卡片上设置Display：Flex，然后将魔法margin-top: auto添加到按钮，则可以实现此目的。
我重新创建了您的代码：
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
gap: 4em;
width: 100%;
}
article{
display: flex;
flex-direction: column;
background: lightgray;
padding: 1em;
min-width: 200px;
max-width: 200px;
}
button{
margin-top: auto; /* the magic */
} <div class="container">
<article>
<h2>title title title title title title title</h2>
<button>Button</button>
</article>
<article>
<h2>title</h2>
<button>Button</button>
</article>
<article>
<h2>title</h2>
<button>Button</button>
</article>
<article>
<h2>title</h2>
<button>Button</button>
</article>
</div>这篇关于如何对齐框项以使按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！