縱向中心和拉伸面向行的Flexbox

Question

我正在嘗試使用flexbox（flex-direction: row）創建基本上是Bootstrap v4卡的水平/面向行的版本。而不是有一個標題，我想有一個左列將包含卡的圖標，而右列將包含卡的文本。除了當我垂直居中左列時，它不再佔據整個垂直間距（參見下面CodePen示例中黃色.icon div的黑色區域），除此之外，我已完成大約95％的操作。如果我告訴列自行伸展（將.icon類的align-self屬性更改爲stretch），則該列將失去其垂直居中。

如何使左/黃/ .icon列垂直居中和覆蓋所有垂直空間？

CodePen的例子有父母和孩子divs着色顯示他們佔領的區域，但在我的最終產品只有.icon div將有背景顏色。其他兩個div（.wrapper和.content）不會有任何背景色。我更喜歡不必設置卡的垂直高度，但如果這是實現我想要完成的唯一方法，則不會成爲交易斷路器。

CodePen.io example

Answer 1

可以inbricate柔性boxe也使用alignements兒童。

也不太清楚，你找什麼確切，但在這裏inbrication和使用Flexbox的居中的事情的一個例子：

包裝在屏幕和內容圖標還中旬在中間

html { 
 
\t display:flex; 
 
\t height:100%;/* give an height or min-height to that flex boxe */ 
 
} 
 
body {/* single element, easy to middle center */ 
 
\t margin:auto;/* or justify-content+align-items center on html */ 
 
} 
 
.wrapper { 
 
\t background-color: black; 
 
\t color: white; 
 
\t display: flex; 
 
\t flex-flow: row nowrap; 
 
\t min-height: 100%; 
 
\t width: 300px 
 
} 
 

 
.icon { 
 
\t display:flex;/* flex child can be a flex boxe too */ 
 
\t align-items:center; 
 
\t background-color: yellow; 
 
\t color: black; 
 
\t flex: 1 1 auto; 
 
\t font-size: 32px; 
 
\t padding: 20px; 
 
} 
 

 
.content { 
 
\t background-color: lightgreen; 
 
\t color: black; 
 
\t flex: 12 1 auto; 
 
\t padding: 20px; 
 
} 
 
h4 { 
 
    margin:0 0 10px; 
 
    } 
 

 
/* where is body ? */ 
 
body { 
 
    box-shadow:0 0 0 5px white, 0 0 0 15px tomato; 
 
    }

<div class="wrapper"> 
 
\t <div class="icon"> 
 
\t \t @ 
 
\t </div> 
 
\t <div class="content"> 
 
\t \t <h4>Application #1</h4> 
 
\t \t <p>This is an application of flexbox. Tomato color is shadowed from body.</p> 
 
\t </div> 
 
</div>

pen forked