【发布时间】：2022-02-25 06:06:37
【问题描述】：
我正在尝试使同一行中的每个元素的高度相等。我不希望元素被拉伸。它们还应该在页面内垂直对齐。我设法使用align-items:center; 使它们在页面上垂直对齐但是，同一行中的框的高度不相等。有什么想法我在这里做错了吗？我不想使用固定高度来实现这一点。
JS Bin
非常感谢。
body {
background: lightblue;
padding: 1rem;
}
.help-boxes {
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.box-wrap {
height: 92vh;
}
.help-box-link {
background: #fff;
-webkit-box-shadow: 0 1rem 3rem rgba(22, 28, 45, 0.175);
box-shadow: 0 1rem 3rem rgba(22, 28, 45, 0.175);
border-radius: 3px;
margin-bottom: 2%;
padding: 1rem;
flex: 0 0 31.33%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="box-wrap">
<div class="help-boxes">
<a href="#" role="button" class="help-box-link">
<p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
<a href="#" role="button" class="help-box-link">
<p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
<a href="#" role="button" class="help-box-link">
<p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
<a href="#" role="button" class="help-box-link">
<p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
<a href="#" role="button" class="help-box-link">
<p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
<a href="#" role="button" class="help-box-link">
<p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</div>
</div>【问题讨论】：
-
谢谢@Paulie_D - 不过我不确定我是否理解。在我的示例中，.help-boxes 不是您要查找的父级？
-
我只希望一行中的框具有相同的高度，但整个集合（所有六个框）在页面上垂直对齐，如果这有意义吗？
-
谢谢，但现在盒子已经拉长了，即使内容不是那么高。
-
好吧，如果不拉伸，你就不能拥有“等高”，所以我看不出你还想要什么。 - jsbin.com/taganunoji/1/edit?html,css,output
-
我在这个输出之后 - ibb.co/qCjBD17 这无法实现吗？
标签： html css flexbox vertical-alignment