對齊Flexbox的

Question

Fiddle here.

我試圖粘白色插入符號（^）至.section-1底部，水平居中內部，但在最底層在容器的底部的元件。正如您所看到的，插入符號本身位於Bootstrap container-fluid內，其本身位於柔性盒內（通過vertical-center類應用）。

我試圖用margin和傳統定位bottom: 0;等無濟於事。同樣，flex-end財產不按我的想法工作。歡迎所有的解決方案和建議，只要他們繼續使用柔性盒。

Answer 1

您可以使用嵌套的柔性容器做到這一點。

HTML

<!-- one adjustment; add span --> 
<div class="align-me-center"><span>Here is some centered text.</span></div> 

CSS

/* ADJUSTMENT TO RULE */ 

.section-1 { 
    min-height: 500px; 
    background-color: #0099cc; 
    height: 500px; /* necessary for child div with percentage height to work; 
         min-height overrides height, so no worries */ 
} 

/* NEW RULES */ 

.container-fluid { 
    display: flex; /* establish nested flex container */ 
    flex-direction: column; 
    height: 100%; /* use full height of container */ 
    justify-content: center; /* position flex items at opposite end of container */ 
} 

.align-me-center { 
    display: flex; /* nested flex container to center flex item (span) */ 
    align-items: center; 
    justify-content: center; 
    height: 100%; 
} 

DEMO：http://jsfiddle.net/b26j5m6t/3/