如何使用css flexbox实现浮在底部并向右浮动？

Question

如何使用CSS3 flexbox模拟浮动左下方并向右浮动？我想实现以下情况(重要: div框中的文本也应该是垂直和水平居中):

编辑:PLNKR示例:http://plnkr.co/edit/oVfbAAIZxRQLRRML7rJR？p = preview 但div框中的文本也应该是垂直和水平居中的.

应增加以下代码:

display: flex;         // for parent container
align-self: flex-end;  // for child div-1 to place it at bottom
margin-left: auto;     // for child div-2 to place it right top

(我不喜欢,margin-left: auto因为在非常小的屏幕上没有最小边距.)

解:

上面的代码使用下面的代码进行了扩充,并且孩子们获得了以下额外的css:

display: flex;             // also for child box for its content
align-items: center;       // center vertically
justify-content: center;   // center text horizontally

Answer 1

试试这个https://jsfiddle.net/2Lzo9vfc/108/

HTML

<div class="content">
    <div class="div div-1">Div 1</div>
    <div class="div div-2">Div 2</div>
</div>

CSS

.content {
    display: flex;
    padding: 20px;
    border: 1px solid black;
    width: 100%;
    height: 200px;
    flex-wrap: wrap;   /* is not necessary */ 
}

.div {
    padding: 25px;
    height: 20px;
    color: white;
    background: black;
}

.div-1 {
    align-self: flex-end;
}

.div-2 {
    margin-left: auto;
}