我目前在父上设置display:flex以及在中间设置子元素。
现在的问题是，因为子元素上应用了嵌套的flex属性。 孙子元素＆＃39;高度自动分配并在两者之间产生不需要的间距。
如何在子元素上保留.parent{
background:#cdcdcd;
display:flex;
flex-direction:row;
flex-wrap: wrap;
padding:30px 10px;
box-sizing: border-box;
}
.child{
flex-grow:1;
flex-basis:33.3%;
padding:10px;
background:#a2a2a2;
box-sizing: border-box;
}
.child:nth-child(3){
display:flex;
flex-direction:row;
flex-wrap: wrap;
padding:10px;
align-items: flex-start;
}
.grandchild {
padding: 10px;
background: #696969;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100%;
box-sizing: border-box;
}属性的同时删除其间的额外间距？
<div class="parent">
<p style="position:absolute; top:-2px; left:28px;">parent</p>
<div class="child">child<br />
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
<div class="child">child
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
</div>
<div class="child">child<br />
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
</div>{{1}}＆＃13;
答案 0 :(得分：4)
您可以使用align-items: flex-start 元素（ flex-container ）上的.parent设置来执行此操作：
.parent {
background: #cdcdcd;
display: flex;
/*flex-direction: row; by default*/
flex-wrap: wrap;
align-items: flex-start; /* added */
padding: 30px 10px;
box-sizing: border-box;
}
.child {
flex: 1 1 33.33%; /* shorthand */
padding: 10px;
background: #a2a2a2;
box-sizing: border-box;
}
.child:nth-child(3){
display: flex;
/*flex-direction: row;*/
flex-wrap: wrap;
padding: 10px;
align-items: flex-start;
}
.grandchild {
padding: 10px;
background: #696969;
flex: 1 0 100%; /* shorthand */
box-sizing: border-box;
}<div class="parent">
<p style="position:absolute;top:-2px;left:28px">parent</p>
<div class="child">child<br>
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
<div class="child">child
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
</div>
<div class="child">child<br>
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
</div>
通过默认 align-items 属性的值设置为stretch，这使 flex-items 填充 flex-container 交叉轴（y）所有项目的 height >，因此 flex-container ，取决于“最高”的高度。
<强>增加：
如果您更喜欢视觉上更好的解决方案：
解决方案＃2：
.parent {
background: #cdcdcd;
display: flex;
/*flex-direction: row;*/
flex-wrap: wrap;
padding: 30px 10px;
box-sizing: border-box;
}
.child {
flex: 1 0 33.33%;
padding: 10px;
background: #a2a2a2;
box-sizing: border-box;
}
.child:nth-child(3){
display: flex;
/*flex-direction: row;*/
flex-wrap: wrap;
padding: 10px;
/*align-items: flex-start; commented out*/
align-self: flex-start; /* added */
}
.grandchild {
padding: 10px;
background: #696969;
flex: 1 0 100%;
box-sizing: border-box;
}<div class="parent">
<p style="position:absolute;top:-2px;left:28px">parent</p>
<div class="child">child<br>
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
<div class="child">child
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
</div>
<div class="child">child<br>
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
</div>
解决方案＃3：
.parent {
background: #cdcdcd;
display: flex;
/*flex-direction: row;*/
flex-wrap: wrap;
padding: 30px 10px;
box-sizing: border-box;
}
.child {
flex: 1 1 33.33%;
padding: 10px;
background: #a2a2a2;
box-sizing: border-box;
}
.child:nth-child(3){ /* added additional wrapper div to html */
display: flex;
flex-direction: column; /* modified */
flex-wrap: wrap;
padding: 10px;
/*align-items: flex-start; commented out*/
}
.grandchild {
padding: 10px;
background: #696969;
flex: 1 0 100%;
box-sizing: border-box;
}<div class="parent">
<p style="position:absolute;top:-2px;left:28px">parent</p>
<div class="child">child<br>
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
<div class="child">child
<div> <!-- additional wrapper div -->
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
</div>
</div>
<div class="child">child<br>
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
</div>