Flexbox reattivo - cambia i margini da orizzontale a verticale dopo l'avvolgimento?

Question

Ho un concetto di layout semplice che può essere riassunto da questa immagine:

Ciò può essere ottenuto facilmente utilizzando flexbox. Come puoi vedere, il div # 1 e il div # 3 toccano i bordi del loro contenitore. Inoltre, il margine tra div # 1 e div # 2 è uguale al margine tra div # 2 e div # 3. Può essere fatto con:

.inner-div{ 
    margin-left:10px; 
} 

.inner-div:first-child{ 
    margin-left:0px; 
} 

Ora, diciamo che la larghezza della vista diminuisce. Voglio che questi div si avvolgano per formare una bella colonna. E mi piacerebbe che questo aspetto:

Ma se questi div conservano la loro configurazione margine orizzontale, hanno un aspetto simile a questo, invece:

Che, come si può indovinare, è indesiderabile.

Come modificare i margini per le div interne quando il loro contenitore è così stretto da essere "avvolto"? C'è un modo per scrivere una regola condizionale che si applicherebbe solo ai div "avvolti"? O mi manca il punto e la soluzione è molto ovvia e ho appena trascurato quella parte delle funzionalità di flex-box? Mi piacerebbe vedere una soluzione che non preveda la previsione della larghezza del contenitore/dello schermo che cambierà il layout da riga a colonna, perché penso che sia l'opzione più gestibile.

Answer 1

È possibile utilizzare i margini negativi per ottenere ciò.

Date un'occhiata a questo violino: http://jsfiddle.net/287vW/

Se non si preoccupano neppure di rimuovere il margine dal primo elemento, ma lascia, e ridurre globalmente il margine del contenitore, vi ritroverete con un consistente risultato.

Supponiamo di avere la seguente struttura:

<div class="margin"> 
    <div class="container"> 
     <div class="box one"></div> 
     <div class="box two"></div> 
     <div class="box three"></div> 
    </div> 
</div> 

allora si può applicare questi stili:

.margin { 
    border:3px solid #000000; 
} 

.container { 
    display:flex; 
    flex-wrap:wrap; 
    margin:-10px 0 0 -10px; 
} 

.box { 
    height:100px; 
    background-color:#555555; 
    margin:10px 0 0 10px; 
    flex-grow:1; 
    min-width:300px; 
} 

Anche se continuiamo tutti i margini sugli elementi, il margine negativo delle rimuove container loro.

Consultare il JS Fiddle di cui sopra per il risultato.

Sono sicuro che questo può essere ottenuto con un div in meno, ma penso che tu possa capirlo da solo ora.

Speranza ha aiutato :)

P.S .: Se vuoi sapere di più su margini negativi, si veda questo articolo su rivista smashing: http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

Answer 2

sì, dai un'occhiata a media queries.

Inoltre, ho creato un piccolo jsfiddle in cui è possibile vederlo in azione a un livello molto semplice. Basta spostare la barra verticale a destra e vedrai che la query multimediale fa la sua magia.

@media (max-width: 200px){ 
    .inner-div { 
     margin: 0 0 10px 0; 
     float: none; 
    } 

    #one{ 
     margin: 0 0 10px 0; 
    } 

    #three { 
     margin: 0px; 
    } 
} 

Se togli la query con i media nel jsfiddle, l'aspetto sarà solo quello che hai descritto.