CSS柔性成长不上边

Question

添加DIV工作考虑以下小提琴：https://jsfiddle.net/7naxprzd/1/

的要求是：

与头

• 两列和内容列
• 面应对准
• 列的底部应该对齐
• 在每列顶部应该有一个水平居中的箭头

如果通过删除div类.arrow-wrapper消除箭头，但代码正常工作，但我需要箭头。

一个解决方案可以是绝对定位箭头，但有没有办法解决这个布局问题与柔性没有绝对定位的箭头？

应该适用于现代浏览器和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"> 
 
     &darr; 
 
    </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"> 
 
     &darr; 
 
    </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>

Answer 1

与col-wrapper-outer类的DIV，而不是这样的：

.col-wrapper-outer { 
    display: flex; 
    flex-wrap: wrap; 
} 

使用此：

.col-wrapper-outer { 
    display: flex; 
    flex-direction: column; 
} 

然后加入flex: 1到.col-wrapper因此它需要的充分容器的高度。

revised fiddle

.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"> 
 
     &darr; 
 
    </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"> 
 
     &darr; 
 
    </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>