ich nur flex für das Layout verwenden, das Markup wie folgt aus:heilig grial Layout mit flex
<div class="grid">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
und der normalen Ansicht wie folgt aus:
wenn in einem Haltepunkt, sehen wie dies:
das Problem ist, ändern Sie nicht die Markup und einfach flex, wie kann ich das machen?
Mit flex können Sie eine Mindestbreite verwenden, um eine Sollbruchstelle festzulegen. Beispiel mit 2 Kindern unter:
min-width:200px;
margin:10px;
padding:10px;
flex:1
macht einen ersten Bruchpunkt bei 200 Pixel + 40px Ränder + 40px padding = ~ 480px (mind grenzt auch oder zurückgesetzt box-sizing Eigenschaften) innen die Flex Behälter.
Beispiel mit Ihrer Struktur im Durchschnitt 750px brechen
.grid {
display: flex;
flex-wrap: wrap;
border: solid;
}
.grid div {
padding: 10px;
margin: 10px;
flex: 1;
border: solid;
min-width: 200px;
/* from 3 childs: avearge breaking points */
/* first breaking-point at 200 x 3 + padding/margin = 730px within flex-container */
/*second breaking-point at 200 x 2 + padding/margin = 480px within flex-container */
}<div class="grid">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>Wie wäre es mit automatischer Breite? @GCyrillus – newbie
@ user2548744 versuche es auch :) vielleicht weniger flexibel, wenn nur die Breite eingestellt –
Nun können Sie das Markup halten aber flex ändern und gehen display: block; mit einigen anderen Regeln? –
Code-Demo hier: https://jsfiddle.net/vehm499h/, aber es funktioniert immer noch nicht: <, es hat es schon einmal versucht ... @FaustoNA – newbie