CSS flex grow 不适用于在顶部添加 div
CSS flex grow does not work with added div on top
考虑以下 fiddle:https://jsfiddle.net/7naxprzd/1/
要求是:
- 两栏 header 和内容
- 列顶部应对齐
- 列底部应对齐
- 在每一列的顶部应该有一个水平居中的箭头
如果通过删除 div
和 class .arrow-wrapper
来消除箭头,代码可以正常工作,但我需要箭头。
一个解决方案可能是对箭头进行绝对定位,但是有没有办法在不对箭头进行绝对定位的情况下使用 flex 解决此布局问题?
应该适用于现代浏览器和 IE11。
.row-wrapper {
display: flex;
}
.col-wrapper-outer {
display: flex;
flex-wrap: wrap;
}
.arrow-wrapper {
width: 100%;
text-align: center;
font-size: 30px;
}
.col-wrapper {
width: 100%;
display: flex;
flex-direction: column;
border: 2px solid red;
color: white;
}
.col-wrapper .header {
background: blue;
}
.col-wrapper .contents {
flex: 1 0 auto;
background: green;
}
<div class="row-wrapper">
<div class="col-wrapper-outer">
<div class="arrow-wrapper">
↓
</div>
<div class="col-wrapper">
<div class="header">Please align tops.</div>
<div class="contents">Let me grow.</div>
</div>
</div>
<div class="col-wrapper-outer">
<div class="arrow-wrapper">
↓
</div>
<div class="col-wrapper">
<div class="header">please align tops.</div>
<div class="contents">Let me grow.<br>Please<br>align<br>bottoms.</div>
</div>
</div>
</div>
在您的 div 中使用 class col-wrapper-outer
,而不是:
.col-wrapper-outer {
display: flex;
flex-wrap: wrap;
}
使用这个:
.col-wrapper-outer {
display: flex;
flex-direction: column;
}
然后将 flex: 1
添加到 .col-wrapper
使其占据容器的整个高度。
.row-wrapper {
display: flex;
}
.col-wrapper-outer {
display: flex;
/* flex-wrap: wrap; */
flex-direction: column; /* NEW */
}
.arrow-wrapper {
width: 100%;
text-align: center;
font-size: 30px;
}
.col-wrapper {
flex: 1; /* NEW */
width: 100%;
display: flex;
flex-direction: column;
border: 2px solid red;
color: white;
}
.col-wrapper .header {
background: blue;
}
.col-wrapper .contents {
flex: 1 0 auto;
background: green;
}
<div class="row-wrapper">
<div class="col-wrapper-outer">
<div class="arrow-wrapper">
↓
</div>
<div class="col-wrapper">
<div class="header">Please align tops.</div>
<div class="contents">Let me grow.</div>
</div>
</div>
<div class="col-wrapper-outer">
<div class="arrow-wrapper">
↓
</div>
<div class="col-wrapper">
<div class="header">please align tops.</div>
<div class="contents">Let me grow.
<br>Please
<br>align
<br>bottoms.</div>
</div>
</div>
</div>
考虑以下 fiddle:https://jsfiddle.net/7naxprzd/1/
要求是:
- 两栏 header 和内容
- 列顶部应对齐
- 列底部应对齐
- 在每一列的顶部应该有一个水平居中的箭头
如果通过删除 div
和 class .arrow-wrapper
来消除箭头,代码可以正常工作,但我需要箭头。
一个解决方案可能是对箭头进行绝对定位,但是有没有办法在不对箭头进行绝对定位的情况下使用 flex 解决此布局问题?
应该适用于现代浏览器和 IE11。
.row-wrapper {
display: flex;
}
.col-wrapper-outer {
display: flex;
flex-wrap: wrap;
}
.arrow-wrapper {
width: 100%;
text-align: center;
font-size: 30px;
}
.col-wrapper {
width: 100%;
display: flex;
flex-direction: column;
border: 2px solid red;
color: white;
}
.col-wrapper .header {
background: blue;
}
.col-wrapper .contents {
flex: 1 0 auto;
background: green;
}
<div class="row-wrapper">
<div class="col-wrapper-outer">
<div class="arrow-wrapper">
↓
</div>
<div class="col-wrapper">
<div class="header">Please align tops.</div>
<div class="contents">Let me grow.</div>
</div>
</div>
<div class="col-wrapper-outer">
<div class="arrow-wrapper">
↓
</div>
<div class="col-wrapper">
<div class="header">please align tops.</div>
<div class="contents">Let me grow.<br>Please<br>align<br>bottoms.</div>
</div>
</div>
</div>
在您的 div 中使用 class col-wrapper-outer
,而不是:
.col-wrapper-outer {
display: flex;
flex-wrap: wrap;
}
使用这个:
.col-wrapper-outer {
display: flex;
flex-direction: column;
}
然后将 flex: 1
添加到 .col-wrapper
使其占据容器的整个高度。
.row-wrapper {
display: flex;
}
.col-wrapper-outer {
display: flex;
/* flex-wrap: wrap; */
flex-direction: column; /* NEW */
}
.arrow-wrapper {
width: 100%;
text-align: center;
font-size: 30px;
}
.col-wrapper {
flex: 1; /* NEW */
width: 100%;
display: flex;
flex-direction: column;
border: 2px solid red;
color: white;
}
.col-wrapper .header {
background: blue;
}
.col-wrapper .contents {
flex: 1 0 auto;
background: green;
}
<div class="row-wrapper">
<div class="col-wrapper-outer">
<div class="arrow-wrapper">
↓
</div>
<div class="col-wrapper">
<div class="header">Please align tops.</div>
<div class="contents">Let me grow.</div>
</div>
</div>
<div class="col-wrapper-outer">
<div class="arrow-wrapper">
↓
</div>
<div class="col-wrapper">
<div class="header">please align tops.</div>
<div class="contents">Let me grow.
<br>Please
<br>align
<br>bottoms.</div>
</div>
</div>
</div>