Question

是否有可能为使用旧版Flexbox规范的浏览器（在我的移动浏览器中）重新创建justify-content: space-between？我需要对齐两个元素：一个在左边，第二个在右边，但没有任何浮动，但最好使用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敲门

您可以使用绝对定位来模仿弹性框效果。

向您添加两个类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 table-cell获得类似的效果。

Answer 2

旧的2009年等价物为box-pack: justify。对于2012年3月的草案（IE10使用），等效值为flex-pack: justify。

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

2 个答案:

穷人的Flexbox敲门