CSS flexbox. Atteindre cette grille sur Safari 6

Question

J'ai lu que Safari 6 supporte partiellement les flexbox mais je ne suis pas exactement sûr de ce qui manque.

Mon but est de créer une grille qui a la possibilité de colonnes latérales fixes mélangées avec des colonnes de liquide.

par exemple:

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

Voici un exemple de travail dans le dernier stable Chrome, FF, Opera, IE10. Malheureusement, cela échoue dans Safari 6 qui semble ignorer complètement les trucs flexbox.

Y a-t-il un tweeter css que je peux faire pour le faire fonctionner, ou une alternative?

Demo/code:http://dominictobias.com/grid/with-fixed.html (< 767px il pile, qui AFAIK est pas réalisable sans fléchir lors du mélange de colonnes liquides et fixes)

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> 

Answer 1

Vous n'avez pas besoin de flexbox pour cela. Voici une astuce qui peut être utilisé pour réaliser exactement cela:

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

Vous pouvez avoir plusieurs flotteurs et peut-être même à plusieurs éléments de largeur variable, aussi longtemps que vous les envelopper dans un récipient et utiliser des pourcentages sur les .

(Si l'article va en ligne: L'astuce consiste à flotter l'élément de largeur fixe, puis utilisez display: block et overflow: hidden (ou auto) sur l'élément de largeur variable Réglage overflow rend en fait le séjour de bloc clair du flotteur.. Plusieurs fois cette astuce peut être utilisée au lieu de recourir à calc().)