Flexbox (旧的)将两个元素绑定到两边

Question

是否有可能为使用旧的Flexbox规范(在我的例子中是移动浏览器)的浏览器重新创建justify-content: space-between？我需要对齐两个元素:一个在左边，第二个在右边，但是没有任何浮动，但是使用Flexbox更好。

有了新的柔性盒，就很容易实现：

<div class="two-columns">
    <span>1</span>
    <span>2</span>
</div>

CSS：

div { 
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between; 
    justify-content: space-between;
}

div span { 
    background: green;
    display: inline-block;
    color: white;
    padding: 20px 30px;
}  

http://jsfiddle.net/R8bbz/1/

Answer 1

可怜人的Flexbox山寨

您可以通过使用绝对定位来模拟挠曲盒效应。

向span元素添加两个类：

<div class="two-columns">
    <span class="left">1</span>
    <span class="right">2</span>
</div>

并应用以下CSS：

div { 
    position: relative;
    outline: 1px dotted gray;
}

div span { 
    background: green;
    display: inline-block;
    color: white;
    padding: 20px 30px;
}  
div .left {
    position: absolute;
    left: 0; 
    top: 0;
}
div .right {
    position: absolute;
    right: 0; 
    top: 0;
}

演示小提琴：http://jsfiddle.net/audetwebdesign/JxYwg/

如果屏幕尺寸非常小，您可能希望将最小宽度放置到父容器中，以防止这些框重叠。

flexbox规范仍然很新，而且没有得到广泛的支持：

boxes

如果你改变你的标记，你可以使用CSS表格单元格来获得类似的效果。

Answer 2

2009年的等价物是box-pack: justify。对于2012年3月的草案( IE10使用的)，对应的是flex-pack: justify。