我正试图将我的头围绕在弹性盒上，但我却因为一些非常简单的事情而碰壁，我似乎无法做到正确。
我有 6 列，我希望它们的高度相同，每行 3 列。我已将 Flex 项目的宽度设置为 33%，但没有设置任何内容的高度。我认为一旦弹性项目有了内容，它就会选择高度最大的项目并将所有内容与其匹配。
这是我的标记：
.container {
width: 800px;
padding: 0 15px;
}
.row-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: -15px;
margin-left: -15px;
flex-wrap: wrap;
}
.flexbox {
flex: 0 0 33%;
padding: 0 15px;
}
.icon-box-1 {
position: relative;
margin-bottom: 50px;
background: #fff;
text-align: center;
border: 1px solid #eee;
padding: 10px;
}
<div class="container">
<div class="row-flex">
<div class="flexbox">
<div class="icon-box-1">
<h1>
One
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Two
</h1>
<h3>Title</h3>
<p>lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Three
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Four
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Five
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Six
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
</div>
</div>
等高列功能来自align-items: stretch，这是 Flex 容器上的初始设置。它使弹性项目占用了所有可用空间交叉轴.
如果您检查每个弹性项目的实际大小，您会发现它们实际上在每行上具有相同的高度（demo https://jsfiddle.net/x7a37s7d/).
问题是每个项目的内容（.icon-box-1) 未拉伸至全高。只是height: auto（内容高度），默认情况下。
为了使内容伸展到整个高度，添加display: flex对于每个弹性项目，所以align-items: stretch生效，就像对父级 (demo https://jsfiddle.net/x7a37s7d/1/).
然后使用flex: 1使内容填满剩余空间主轴 (demo https://jsfiddle.net/x7a37s7d/2/).
.container {
width: 800px;
padding: 0 15px;
}
.row-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: -15px;
margin-left: -15px;
flex-wrap: wrap;
}
.flexbox {
flex: 0 0 33%;
padding: 0 15px;
border: 1px dashed red; /* for illustration */
display: flex; /* new */
}
.icon-box-1 {
flex: 1; /* NEW */
position: relative;
margin-bottom: 50px;
background: #fff;
text-align: center;
border: 1px solid #eee;
padding: 10px;
}
<div class="container">
<div class="row-flex">
<div class="flexbox">
<div class="icon-box-1">
<h1>
One
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Two
</h1>
<h3>Title</h3>
<p>lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Three
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Four
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Five
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
<div class="flexbox">
<div class="icon-box-1">
<h1>
Six
</h1>
<h3>Title</h3>
<p>lots of random text, lots of random text, lots of random text</p>
</div>
</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
