CSS Flex griglia - stessa larghezza per ultimo elemento

Question

Hey Sto cercando di creare un layout di dialogo reattivo per una galleria, che assomiglia a questo http://webdesignerwall.com/demo/responsive-column-grid/

Il problema con l'esempio è che le larghezze sono fissi e le media query sono necessario. Ho molte colonne per essere una soluzione fattibile.

posso ottenere lo stesso risultato con Flex cinge, tuttavia l'ultima colonna è più grande delle altre, come mostrato in questo CodePen:

http://codepen.io/anon/pen/zClcx

HTML

<div class="flex-container same-width same-height"> 
    <div class="flex-item"> 
    <div>g</div> 
    </div> 
    <div class="flex-item"> 
    <div>g</div> 
    </div> 
    <div class="flex-item"> 
    <div>g</div> 
    </div> 
    <div class="flex-item"> 
    <div>why am I longer than my friends?</div> 
    </div> 
</div> 

CSS

.flex-container { 
    display: -webkit-flex; 
    display: flex; 
    width: 100%; 
    max-width: 950px; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    background: grey; 

    & > * { 
    min-width: 300px; 
    background: green; 
    max-width: 404px; 
    flex: 1 1 auto; 
    } 
    .flex-item > div { 
    background: red; 
    } 
} 

Domanda:Come posso rendere l'ultima colonna delle stesse dimensioni delle altre?

Answer 1

Utilizzando una confezione flessibile, è necessario prestare attenzione alle larghezze dello max- e min-. Citando da w3schools:

Suggerimento: gli elementi che sono flessibili possono ridursi o aumentare man mano che la scatola si restringe e aumenta. Ogni volta che c'è spazio extra in una scatola, gli elementi flessibili vengono espansi per riempire quello spazio.

Per contrastare ciò, iniziare una larghezza di X numero di pixel per il contenitore ma utilizzare le percentuali invece delle quantità di pixel per le caselle interne. La percentuale del contenitore sarà la stessa per tutte le colonne.

In questo modo si elimina anche la necessità di un box flessibile, perché questi sono solo se si desidera espandere le caselle in direzione orizzontale (rendendole più ampie in base al contenuto di ciascuna) piuttosto che in direzione verticale.

PS: se si desidera reagire e mantenere la larghezza proporzionale allo spazio intermedio, utilizzare anche le percentuali per i margini (tenendo presente le dimensioni dei bordi e delle imbottiture). Questo non è necessario ma è una funzionalità utile per mantenere un aspetto coerente su diversi dispositivi.

Answer 2

È un malinteso comune, ma Flexbox non è un sistema di rete. Una volta che gli elementi flessibili sono impostati per essere flessibili, possono essere ridimensionati solo rispetto agli altri oggetti flessibili sulla stessa linea, non con gli elementi flessibili su qualsiasi altra linea. Non c'è modo di forzarli ad allinearsi senza usare una larghezza specifica (sebbene questa larghezza possa essere una percentuale).

La larghezza minima non ha alcuno scopo in quanto i tuoi articoli flessibili sono flessibili. Il tuo valore di restringimento della flessione non ha alcuno scopo perché i tuoi elementi flessibili possono essere avvolti. La larghezza massima è l'unica cosa che impedisce agli elementi dell'ultima riga di riempire l'intera riga. Dovresti conoscere la larghezza esatta degli articoli nella riga precedente per impostare il valore di larghezza massima corretto.

correlati:

• Flex-box: Align last row to grid
• Left aligned last row in centered grid of elements

Answer 3

Impostare la flessione crescere a 0.

violino: http://jsfiddle.net/RichAyotte/Ev5V7/

<div class='flex-container seven'> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>6</div> 
    <div>7</div> 
</div> 

.flex-container { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: flex-start; 
} 
.flex-container div { 
    font-size: 200%; 
    padding: 2mm; 
    margin: 10px 10px; 
    flex: 0 1 20%; 
    box-shadow: 3px 3px 2px 0px rgba(50, 50, 50, 0.5); 
}