Elastyczny flexbox - zmienia marginesy z poziomego na pionowy po owijaniu?

Question

Mam prostą koncepcję układu, które można podsumować to zdjęcie:

Można to łatwo osiągnąć stosując flexbox. Jak widać, div # 1 i div # 3 dotykają granic swojego kontenera. Również margines między div # 1 i div # 2 jest równy marginesowi między div # 2 i div # 3. Można to zrobić:

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

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

Teraz powiedzmy, że szerokość rzutni zmniejsza się. Chcę, żeby te elementy div zawinęły się, tworząc ładną kolumnę. I chciałbym im wyglądać następująco:

Ale jeśli te DIV zachowują swoją konfigurację marginesu poziomego, wyglądają mniej więcej tak zamiast:

Które, jak ty można odgadnąć, jest niepożądane.

Jak zmienić marginesy dla tych wewnętrznych elementów div, gdy ich kontener jest tak wąski, że są "zawijane"? Czy istnieje sposób na zapisanie reguły warunkowej, która miałaby zastosowanie tylko do "opakowanych" elementów div? Czy też brakuje mi punktu i rozwiązanie jest bardzo oczywiste i właśnie przeoczyłem tę część możliwości flex-box? Chciałbym zobaczyć rozwiązanie, które nie wymagałoby przewidywania, jaki rozmiar kontenera/ekranu ma zmienić układ z wiersza na kolumnę, ponieważ uważam, że jest to opcja najbardziej do utrzymania.

Answer 1

W tym celu można w pełni wykorzystać ujemne marginesy.

Spójrz na to ryba: http://jsfiddle.net/287vW/

Jeśli nawet nie usuwając margines od pierwszego elementu, ale pozostawić je, a globalnie zmniejszyć margines pojemnika, skończy się z konsekwentnym wynik.

Załóżmy, mają następującą strukturę:

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

Następnie można zastosować te style:

.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; 
} 

Chociaż zachować wszystkie marginesy na elementach, ujemny margines służy do usuwania pojemników im.

Skonsultuj się z wyżej wspomnianym JS Fiddle dla wyniku.

Jestem pewien, że można to osiągnąć za pomocą jednego elementu div mniej, ale myślę, że możesz to teraz określić.

Nadzieję, że pomogło :)

P.S .: Jeśli chcesz wiedzieć więcej o negatywnych marginesów, zobacz ten artykuł na smashing mag: http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

Answer 2

tak, spójrz na media queries.

Ponadto, zrobiłem mały jsfiddle, gdzie można go zobaczyć w akcji na bardzo prostym poziomie. Po prostu przesuń pionowy pasek w prawo, a zobaczysz, że zapytanie o media robi magię.

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

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

    #three { 
     margin: 0px; 
    } 
} 

Jeśli zabrać zapytania mediów w jsfiddle będzie wyglądać właśnie opisałeś.