我读到 Safari 6 部分支持 flexbox，但我不确定缺少什么。
我的目标是创建一个可以将固定侧柱与液柱混合的网格。
例如：
| 256px fixed width | this column has width:100% and spans rest of space |
这是一个在最新稳定的 Chrome、FF、Opera、IE10 中工作的示例。不幸的是，这在 Safari 6 中失败了，但这似乎完全忽略了 flexbox 的东西。
我可以进行一些 css 调整以使其正常工作，还是替代方法？
演示/代码： http ://dominictobias.com/grid/with-fixed.html（< 767px 它将堆叠，当混合液体和固定柱时，如果没有 flex，AFAIK 是无法实现的）
CSS：
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;
}
}
html:
<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>