我试图使用黄色背景的元素与该行中的其他元素具有相同的高度flex，但无法通过这种设计弄清楚。这li元素只是不想处于全高。
运行代码片段看看我在说什么。
谢谢你！
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#main {
width: 90%;
padding: 0;
margin: 0 auto;
font-size: 0;
}
.wrapper {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
.header {
background: yellow;
flex: 1;
font-size: 13px;
width: 100%;
}
.body {
font-size: 13px;
border: 1px solid orange;
background: lightblue;
width: 100%;
}
.liWrapper {
display: inline-flex;
width: 25%;
min-width: 25%;
margin: 10px 0 0 0;
padding: 0;
}
<div id="main">
<div class="liWrapper">
<div class="wrapper">
<div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div>
<div class="body">picture</div>
</div>
</div>
<div class="liWrapper">
<div class="wrapper">
<div class="header">Title fwef wef wef e</div>
<div class="body">picture</div>
</div>
</div>
<div class="liWrapper">
<div class="wrapper">
<div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div>
<div class="body">picture</div>
</div>
</div>
<div class="liWrapper">
<div class="wrapper">
<div class="header">Title fwef wef wefwf ewf w</div>
<div class="body">picture</div>
</div>
</div>
<div class="liWrapper">
<div class="wrapper">
<div class="header">Title fwef wef wef ef ewfff wefe wfew f wef fewf wef few few fwef ewf ewf w</div>
<div class="body">picture</div>
</div>
</div>
<div class="liWrapper">
<div class="wrapper">
<div class="header">Title fwef wef</div>
<div class="body">Body</div>
</div>
</div>
</div>
您需要添加一个
display: flex;
flex-wrap: wrap;
to #main（这也包含一个隐含的flex-direction: row;）。你期待着每一个.wrapper是相同的高度，但你没有任何样式告诉他们这样做。这display: flex; and flex-direction: column; on the .wrapper只是告诉包装器在其子元素之间分配其高度。如果它还没有达到正确的高度，更多的高度就不会神奇地出现。
默认情况下，弹性行和换行使所有子元素的高度相等，我认为这是您想要的行为。 :)
html, body {
height: 100%;
margin: 0; padding: 0;
}
#main{
width: 90%;
padding: 0;
margin: 0 auto;
font-size: 0;
display: flex;
flex-wrap: wrap;
}
.wrapper {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
.header {
background: yellow;
flex: 1;
font-size: 13px;
width: 100%;
}
.body {
font-size: 13px;
border: 1px solid orange;
background: lightblue;
width: 100%;
}
.liWrapper{
display: inline-flex;
width: 25%;
min-width: 25%;
margin: 10px 0 0 0;
padding: 0;
}
<div id="main">
<div class="liWrapper">
<div class="wrapper">
<div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div>
<div class="body">picture</div>
</div>
</div>
<div class="liWrapper">
<div class="wrapper">
<div class="header">Title fwef wef wef e</div>
<div class="body">picture</div>
</div>
</div>
<div class="liWrapper">
<div class="wrapper">
<div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div>
<div class="body">picture</div>
</div>
</div>
<div class="liWrapper">
<div class="wrapper">
<div class="header">Title fwef wef wefwf ewf w</div>
<div class="body">picture</div>
</div>
</div>
<div class="liWrapper">
<div class="wrapper">
<div class="header">Title fwef wef wef ef ewfff wefe wfew f wef fewf wef few few fwef ewf ewf w</div>
<div class="body">picture</div>
</div>
</div>
<div class="liWrapper">
<div class="wrapper">
<div class="header">Title fwef wef</div>
<div class="body">Body</div>
</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
