我试图使用FlexBox在Flex容器的四个角落放置四个元素,我正在努力.我无法弄清楚如何证明单个flex-items的内容.每次我尝试,它最终将flex-container的所有内容放到左侧或右侧(或顶部/底部,取决于主轴).
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 {
}
这是一个小提琴,说明我正在尝试做什么：
解决方法
这是一种方法(为清晰起见,省略了前缀)：
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;
}
