CSS: skalieren float div Breite 100% bis 2 float divs von min-width können passen die Breite

Question

Ich habe einige Probleme mit CSS, da ich es nicht regelmäßig benutze. Das Problem ist das Folgende: Ich habe mehrere Float-Objekte der gleichen Größe. Um das Design reaktionsfähig zu halten, zeigt ein Smartphone diese Float-Objekte möglicherweise vertikal an. Auf einem größeren Bildschirm können die Float-Objekte jedoch nebeneinander angezeigt werden.

Um die Sichtbarkeit auf einem Smartphone zu maximieren, sollten die Float-Objekte die gesamte Breite (100%) einnehmen. Ich habe eine minimale und eine maximale Breite hinzugefügt. Die maximale Breite ist 2 mal die minimale Breite. Wir beginnen damit, dass die Float-Objekte vertikal ausgerichtet sind. Wenn die horizontale Bildschirmgröße zunimmt, füllt die Breite der Objekte den Bildschirm, aber sobald das Objekt die maximale Breite erreicht, sollte es 2 dieser Floating-Objekte neben einem anderen mit minimaler Breite anzeigen, und so weiter. Irgendeine Idee, wie man das genau macht?

Vielen Dank!

Answer 1

Da kein Code zu verwenden, hier ein einfaches Beispiel mit Flex und min-width:

Mit 3 Kindern min-width:300px, hier haben wir eine Bruchstelle auf 900px, dann bei 600px, dann Körper eine Scrollbar zeigen unterw 300px Breite. Medienabfragen sind hier unnötig.

body /* or whatever container you use */{ 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
} 
 
div { 
 
    flex:1; 
 
    min-width:300px;/* first break point at 300px x number of divs */ 
 
    background:turquoise; 
 
} 
 
div + div { 
 
    background:tomato; 
 
} 
 
div:last-of-type { 
 
    background:gold; 
 
}

<div>one</div> 
 
<div>two</div> 
 
<div>three</div>

codepen to play with