CSS flexbox. Safari 6에서이 그리드 달성

Question

Safari 6에는 flexbox가 부분적으로 지원되지만, 무엇이 누락되었는지 정확히 알지 못합니다.

내 목표는 고정 된 측면 열이 액체 열과 혼합 될 가능성이있는 격자를 만드는 것입니다.

는 예컨대 :

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

여기에 최신 안정 크롬, FF, 오페라, IE10 작업 예입니다. 불행히도 이것은 Safari 6에서 실패합니다. 그러나 이것은 flexbox에 대한 내용을 완전히 무시한 것 같습니다.

작동 시키거나 대체 할 수있는 몇 가지 CSS 팅크가 있습니까?

데모/코드 :http://dominictobias.com/grid/with-fixed.html (< 767px이 적층되며 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> 

Answer 1

플렉스 박스가 필요하지 않습니다. 여기에 정확히 달성하는 데 사용할 수있는 영리한 트릭는 다음과 같습니다

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

여러 수레를 가질 수 있으며, 심지어 여러 가변 폭 요소가있을 수 있습니다

만큼 당신이 컨테이너에서 그들을 감싸고 그들에 비율을 사용할 때 .

은 (경우에 기사는 오프라인 상태 :. 비결은 고정 폭 요소를 부유하고 사용하는 가변 폭 요소에 display: block 및 overflow: hidden (또는 auto) 실제로 부동의 명확한 블록 숙박을하게 overflow을 설정하는 것입니다. 이 트릭을 calc()을 사용하는 대신 여러 번 사용할 수 있습니다.