我试图将四个元素放在flex-container使用Flexbox的四个角中，但我很挣扎。我不知道如何证明个人的内容合理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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句