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>