css - CSS フレックスボックス。Safari 6 でこのグリッドを達成する

Question

Safari 6 では flexbox が部分的にサポートされていると読みましたが、何が欠けているのか正確にはわかりません。

私の目標は、固定サイドカラムと液体カラムが混在する可能性のあるグリッドを作成することです。

例えば：

| 256px fixed width | this column has width:100% and spans rest of space |

これは、最新の安定した Chrome、FF、Opera、IE10 で動作する例です。残念ながら、これは Safari 6 では失敗しますが、これはフレックスボックスのものを完全に無視しているようです。

それを機能させるためにできるCSSの微調整、または代替手段はありますか？

デモ/コード: http://dominictobias.com/grid/with-fixed.html (< 767px スタックします。これは、液体カラムと固定カラムを混合するときにフレックスなしでは実現できません)

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>

score 1 · Accepted Answer

これにはフレックスボックスは必要ありません。これを正確に達成するために使用できる巧妙なトリックを次に示します。

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

複数の float を持つことができ、さらに複数の可変幅要素を持つこともできます。ただし、それらをコンテナーにラップし、それらにパーセンテージを使用する場合に限ります。

(記事がオフラインになった場合: トリックは、固定幅要素をフロートさせてから、可変幅要素でdisplay: blockand overflow: hidden(または) を使用することです。実際に設定すると、ブロックはフロートから離れたままになります。多くの場合、このトリックは代わりに使用できます。に頼ることの。)autooverflowcalc()

css - CSS フレックスボックス。Safari 6 でこのグリッドを達成する

1 に答える 1

Related

Reference