2016-08-09 2 views
3

ich es geschafft haben, eine gewünschte Layout von Elementen pro dieser Darstellung mit Flexbox zu erstellen:Flexbox nicht in Firefox zu arbeiten, wenn Seitenverhältnis mit% Polsterelemente mit

elements layout achieved with flexbox

aber es scheint nicht zu funktionieren in Firefox. Firefox respektiert nicht die inneren Elemente, die eingestellt werden, um das Seitenverhältnis beizubehalten. Ich habe versucht eine Antwort von here, aber es hat nicht geholfen.

* Bitte ignorieren Sie das Fehlen von Präfixen für Flex-Anweisungen. Ich verwende Autoprefixer in meinem Code, so dass die Ausgabe CSS sie enthält.

.box { 
 
    width: 100%; 
 
    padding-bottom: 66.199%; 
 
    background: #eee; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.flex-grid { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    flex-direction: column; 
 
    min-height: 100%; 
 
} 
 
.flex-grid .flex-grid-container { 
 
    display: flex !important; 
 
    display: -webkit-flex; 
 
    flex: 1 !important; 
 
} 
 
.flex-grid .flex-grid-container > .flex-grid-child { 
 
    margin-right: 20px; 
 
    margin-bottom: 20px; 
 
} 
 
.flex-grid .flex-grid-container > .flex-grid-child:last-of-type { 
 
    margin-right: 0px; 
 
} 
 
.flex-grid .flex-grid-row, .flex-grid .flex-grid-column { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    justify-content: flex-start; 
 
    margin-bottom: 0px; 
 
} 
 
.flex-grid .flex-grid-column { 
 
    flex-direction: column; 
 
} 
 
.flex-grid .flex-grid-column .flex-grid-child { 
 
    margin-right: 10px; 
 
    margin-bottom: 20px; 
 
    overflow: hidden; 
 
} 
 
.flex-grid .flex-grid-column .flex-grid-child:last-of-type { 
 
    margin-bottom: 0px; 
 
} 
 
.flex-grid .flex-grid-column:last-of-type .flex-grid-child { 
 
    margin-right: 0px; 
 
    margin-left: 10px; 
 
} 
 
.flex-grid .flex-grid-mother { 
 
    flex: 1; 
 
    align-self: auto; 
 
} 
 
.flex-grid .flex-grid-child { 
 
    flex: 1; 
 
    align-self: auto; 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    -webkit-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
}
<div class="flex-grid"> 
 
    <div class="flex-grid-container flex-grid-mother flex-grid-row"> 
 
     <div class="flex-grid-child"> 
 
      <div class="box"></div> 
 
     </div> 
 
     <div class="flex-grid-child flex-grid-row"> 
 
      <div class="flex-grid-child flex-grid-column"> 
 
       <div class="flex-grid-child"> 
 
        <div class="box"></div> 
 
       </div> 
 
       <div class="flex-grid-child"> 
 
        <div class="box"></div> 
 
       </div> 
 
      </div> 
 
      <div class="flex-grid-child flex-grid-column"> 
 
       <div class="flex-grid-child"> 
 
        <div class="box"></div> 
 
       </div> 
 
       <div class="flex-grid-child"> 
 
        <div class="box"></div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Here is the CodePen

Antwort

0

Sie zum parent der .flex-grid, in diesem Fall body, eine feste Höhe oder in diesem Fall hinzufügen, könnten Sie 100vh

verwenden könnten oder wenn Sie haben einen anderen Container verwenden eine feste Höhe auf diesem.

siehe unten

body { 
 
    height:100vh; 
 
    } 
 
.box { 
 
    width: 100%; 
 
    padding-bottom: 66.199%; 
 
    background: #eee; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.flex-grid { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    flex-direction: column; 
 
    min-height: 100%; 
 
} 
 
.flex-grid .flex-grid-container { 
 
    display: flex !important; 
 
    display: -webkit-flex; 
 
    flex: 1 !important; 
 
} 
 
.flex-grid .flex-grid-container > .flex-grid-child { 
 
    margin-right: 20px; 
 
    margin-bottom: 20px; 
 
} 
 
.flex-grid .flex-grid-container > .flex-grid-child:last-of-type { 
 
    margin-right: 0px; 
 
} 
 
.flex-grid .flex-grid-row, .flex-grid .flex-grid-column { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    justify-content: flex-start; 
 
    margin-bottom: 0px; 
 
} 
 
.flex-grid .flex-grid-column { 
 
    flex-direction: column; 
 
} 
 
.flex-grid .flex-grid-column .flex-grid-child { 
 
    margin-right: 10px; 
 
    margin-bottom: 20px; 
 
    overflow: hidden; 
 
} 
 
.flex-grid .flex-grid-column .flex-grid-child:last-of-type { 
 
    margin-bottom: 0px; 
 
} 
 
.flex-grid .flex-grid-column:last-of-type .flex-grid-child { 
 
    margin-right: 0px; 
 
    margin-left: 10px; 
 
} 
 
.flex-grid .flex-grid-mother { 
 
    flex: 1; 
 
    align-self: auto; 
 
} 
 
.flex-grid .flex-grid-child { 
 
    flex: 1; 
 
    align-self: auto; 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    -webkit-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
}
<div class="flex-grid"> 
 
    <div class="flex-grid-container flex-grid-mother flex-grid-row"> 
 
     <div class="flex-grid-child"> 
 
      <div class="box"></div> 
 
     </div> 
 
     <div class="flex-grid-child flex-grid-row"> 
 
      <div class="flex-grid-child flex-grid-column"> 
 
       <div class="flex-grid-child"> 
 
        <div class="box"></div> 
 
       </div> 
 
       <div class="flex-grid-child"> 
 
        <div class="box"></div> 
 
       </div> 
 
      </div> 
 
      <div class="flex-grid-child flex-grid-column"> 
 
       <div class="flex-grid-child"> 
 
        <div class="box"></div> 
 
       </div> 
 
       <div class="flex-grid-child"> 
 
        <div class="box"></div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

+0

Danke für die Antwort-Snippet. Es funktioniert teilweise, weil die .box-Elemente beim Anwenden nicht mehr ihr Seitenverhältnis beibehalten, was für mich entscheidend ist. Gedanken? – Flev

Verwandte Themen