CSS flexbox。在Safari 6上实现此网格

我读到Safari6部分支持flexbox，但我不确定缺少什么

我的目标是创建一个网格，它可以将固定侧柱与液柱混合

e、 g:

| 256px固定宽度|此列的宽度为：100%，并跨越其余空间|

下面是一个使用最新稳定的Chrome、FF、Opera和IE10的示例。不幸的是，这在Safari6中失败了，尽管它似乎完全忽略了flexbox的内容

是否有一些css的调整，我可以让它工作，或替代

演示/代码：（<767px它将堆叠，在混合液体和固定柱时，如果没有flex，这是无法实现的）

css:

html:

这根柱子横跨16英尺
这个嵌套的柱跨越12米
这个嵌套的柱跨越12米
6列
6列
6列
6列
这根柱子横跨8英尺
这是一个固定的256px柱
这是一个固定的256px柱
这是一个固定的256px柱
这是一个固定的256px柱
这是一个固定的256px柱
这是一个固定的256px柱
这是一个固定的256px柱
这是一个固定的256px柱
此列跨越其余宽度，由24列组成
6列
6列
6列
6列
这是一个固定的256px柱
这是一个固定的256px柱
这是一个固定的256px柱
这是一个固定的256px柱
这是一个固定的256px柱
这是一个固定的256px柱
这是一个固定的256px柱
这是一个固定的256px柱
此列跨越其余宽度，由24列组成
6列
6列
6列
6列
这是一个固定的右侧256px列
这是一个固定的右侧256px列
这是一个固定的右侧256px列
这是一个固定的右侧256px列
这是一个固定的右侧256px列
这是一个固定的右侧256px列
这是一个固定的右侧256px列
这是一个固定的右侧256px列
此柱跨度为10，偏移量为6
此柱跨度为3，偏移量为5

您不需要flexbox来完成此操作。这里有一个聪明的技巧可以用来实现这一目标：

您可能有多个浮动，甚至可能有多个可变宽度元素，只要您将它们包装在一个容器中并对其使用百分比

---

（如果文章脱机：诀窍是浮动固定宽度元素，然后使用

显示：block

和

溢出：hidden

（或

自动

）在可变宽度元素上。设置

overflow

实际上会使块远离浮动。很多时候可以使用此技巧，而不是诉诸

calc（）

）

你需要在问题中提供代码。html/css位于单个html上，因为它有点长。我不想发布它，但我会将css放在上面，并介绍一下htmlAh good point@dalgard。我用它来处理文本旁边的图像，但没有想到它会用于布局！遗憾的是，它限制为两列（我认为），但这是一个好主意。正如我所提到的，您可以有任意数量的固定宽度浮动，并且您可以使用

display:block

body {
    margin: 0;
}
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}
.row { 
    width: 2560px; 
    max-width: 100%; 
    min-width: 320px; 
    margin: 0 auto;
}
.row.fixed {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.row .row { 
    width: auto; 
    max-width: none; 
    min-width: 0; 
    margin: 16px -16px; 
}
.row:before,
.row:after {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}
.row .col { 
    position: relative;
    float: left;
    min-height: 1px;
    padding: 16px;
}

.row .span-1 { width: 4.167%; }
.row .span-2 { width: 8.333%; }
.row .span-3 { width: 12.5%; }
.row .span-4 { width: 16.667%; }
.row .span-5 { width: 20.833%; }
.row .span-6 { width: 25%; }
.row .span-7 { width: 29.167%; }
.row .span-8 { width: 33.333%; }
.row .span-9 { width: 37.5%; }
.row .span-10 { width: 41.667%; }
.row .span-11 { width: 45.833%; }
.row .span-12 { width: 50%; }
.row .span-13 { width: 54.167%; }
.row .span-14 { width: 58.333%; }
.row .span-15 { width: 62.5%; }
.row .span-16 { width: 66.667%; }
.row .span-17 { width: 70.833%; }
.row .span-18 { width: 75%; }
.row .span-19 { width: 79.167%; }
.row .span-20 { width: 83.333%; }
.row .span-21 { width: 87.5%; }
.row .span-22 { width: 91.667%; }
.row .span-23 { width: 95.833%; }
.row .span-24 { width: 100%; }

.row .fixed-256 { 
    -webkit-flex: 1 256px;
    -moz-flex: 1 256px;
    -ms-flex: 1 256px;
    flex: 1 256px;
}

.row .fixed-content { 
    -webkit-flex: 1 99 100%;
    -moz-flex: 1 99 100%;
    -ms-flex: 1 99 100%;
    flex: 1 99 100%;
}

.row .offset-1 { margin-left: 4.167%; }
.row .offset-2 { margin-left: 8.333%; }
.row .offset-3 { margin-left: 12.5%; }
.row .offset-4 { margin-left: 16.667%; }
.row .offset-5 { margin-left: 20.833%; }
.row .offset-6 { margin-left: 25%; }
.row .offset-7 { margin-left: 29.167%; }
.row .offset-8 { margin-left: 33.333%; }
.row .offset-9 { margin-left: 37.5%; }
.row .offset-10 { margin-left: 41.667%; }
.row .offset-11 { margin-left: 45.833%; }
.row .offset-12 { margin-left: 50%; }
.row .offset-13 { margin-left: 54.167%; }
.row .offset-14 { margin-left: 58.333%; }
.row .offset-15 { margin-left: 62.5%; }
.row .offset-16 { margin-left: 66.667%; }
.row .offset-17 { margin-left: 70.833%; }
.row .offset-18 { margin-left: 75%; }
.row .offset-19 { margin-left: 79.167%; }
.row .offset-20 { margin-left: 83.333%; }
.row .offset-21 { margin-left: 87.5%; }
.row .offset-22 { margin-left: 91.667%; }
.row .offset-23 { margin-left: 95.833%; }
.row .offset-24 { margin-left: 100%; }

.show-grid .row {
    margin-bottom: 16px;
}

.show-grid .col {
    background-color: #eee;
    border: 1px solid #ddd;
    background-color: rgba(70,61,180,.15);
    border: 1px solid rgba(70,61,180,.2);
}

@media only screen and (max-width: 767px) {
    .row { 
        width: auto; 
        min-width: 0; 
        margin-left: 0;
        margin-right: 0;
    }
    .row.fixed {
        display: block;
    }
    .row .col {
        width: auto !important; 
        float: none;
        margin-left: 0;
    }
    .row .col:last-child { 
        float: none; 
    }
    .row .col:before,
    .row .col:after {
        content: " ";
        display: table;
    }
    .row .col:after {
        clear: both;
    }
}

<div class="row">
    <div class="col span-16">
        This column spans 16
        <div class="row">
            <div class="col span-12">
                This nested column spans 12
            </div>
            <div class="col span-12">
                This nested column spans 12
                <div class="row">
                    <div class="col span-6">6 column</div>
                    <div class="col span-6">6 column</div>
                    <div class="col span-6">6 column</div>
                    <div class="col span-6">6 column</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col span-8">
        This column spans 8
    </div>
</div>

<div class="row fixed">
    <div class="col fixed-256">
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
    </div>
    <div class="col fixed-content span-24">
        This column spans the rest of the width and consists of 24 columns
        <div class="row">
            <div class="col span-6">6 column</div>
            <div class="col span-6">6 column</div>
            <div class="col span-6">6 column</div>
            <div class="col span-6">6 column</div>
        </div>
    </div>
</div>

<div class="row fixed">
    <div class="col fixed-256">
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
        This is a fixed 256px column
    </div>
    <div class="col fixed-content span-24">
        This column spans the rest of the width and consists of 24 columns
        <div class="row">
            <div class="col span-6">6 column</div>
            <div class="col span-6">6 column</div>
            <div class="col span-6">6 column</div>
            <div class="col span-6">6 column</div>
        </div>
    </div>
    <div class="col fixed-256">
        This is a fixed right 256px column
        This is a fixed right 256px column
        This is a fixed right 256px column
        This is a fixed right 256px column
        This is a fixed right 256px column
        This is a fixed right 256px column
        This is a fixed right 256px column
        This is a fixed right 256px column
    </div>
</div>

<div class="row">
    <div class="col offset-6 span-10">
        This column spans 10, and is offseted by 6
    </div>

    <div class="col offset-5 span-3">
        This column spans 3, and is offseted by 5
    </div>
</div>