css - Flexbox（旧）将两个元素绑定到每一侧

Question

是否有可能为justify-content: space-between使用旧 Flexbox 规范的浏览器（在我的情况下为移动浏览器）重新创建？我需要对齐两个元素：一个在左侧，第二个在右侧，但没有任何浮动，但最好使用 Flexbox。

使用新的 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 淘汰赛

您可以通过使用绝对定位来模仿 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 规范仍然很新，并没有得到广泛支持：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

如果您更改了标记，则可以使用 CSS 表格单元格来获得类似的效果。

Answer 2

2009 年的旧版本是box-pack: justify. 对于 2012 年 3 月的草案（IE10 使用），等价于flex-pack: justify.