使用 Flexbox 在角落对齐元素

Question

我正在尝试使用 Flexbox 将四个元素放在 flex-container 的四个角中，但我很吃力。我不知道如何证明个人 flex-items 的内容。每次我尝试时，它最终都会将 flex-container 的所有内容放在左侧或右侧（或 top/bottom 取决于主轴）。

HTML:

<div class="container">
    <div class="top-left">
         TL
    </div>
    <div class="top-right">
        TR
    </div>
    <div class="bottom-left">
        BL
    </div>
    <div class="bottom-right">
       BR
    </div>
</div>

这是我的 CSS:

.container {
    display: -webkit-flex;
    background-color:#ccc;
}

.top-left {
 /* ? */
}

.top-right {

}

.bottom-left {

}

.bottom-right {

}

这里有一个 fiddle 说明了我正在尝试做的事情：

http://jsfiddle.net/JWNmZ/8/

Answer 1

这是一种方法（为清楚起见省略了前缀）：http://jsfiddle.net/JWNmZ/10/

.container {
    display: flex;
    flex-wrap: wrap;
    background-color:#ccc;
}

.top-left {
    flex: 50%; 
}

.top-right {
    flex: 50%;
    text-align: right;
}

.bottom-left {
    flex: 50%;
}

.bottom-right {
    flex: 50%;
    text-align: right;
}

使用 Flexbox 在角落对齐元素

Align elements in corners using Flexbox

html

css

flexbox