Hallo
Ich würde grundsätzlich zu diesem HTML
Code:
<article>
<section></section>
<section></section>
<section></section>
<section></section>
</article>
das folgende CSS verwenden
Code:
@media all {
article {
display: flex;
flex-wrap: wrap;
}
section {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 100%;
}
}
@media only screen and (min-width: 500px) {
section {
flex-basis: 50%;
}
}
@media only screen and (min-width: 650px) {
section {
flex-basis: 33.33%;
}
}
Bei diesem Vorgehen sind die Container immer gleich breit, egal wie viele in einer Spalte stehen.
Falls Container immer die gesamte Spaltenbreite ausfüllen sollen muss
flex-grow: 0 durch
flex-grow: 1 ersetzt werden, also
Code:
section {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 100%;
}
Zunächst das CSS für schmale Fenster erstellen und dann das für breitere hinzufügen nennt sich
Mobile First und hat sich in der Praxis bewährt.
Für flex-grow, flex-shrink und flex-basis gibt es eine Kurzschreibweise
mit der aber nicht alle Browser zurechtkommen.
Zudem machen sich viele Webseitenersteller gar keine Gedanken, das eine Kurzschreibweise wie
nicht nur Auswirkungen auf die Eigenschaft flex-grow hat, sondern auch auf die nicht aufgeführten flex-shrink und flex-basis.
Deshalb schreibe ich die Werte immer einzeln hin, umgehe damit eventuelle Browserprobleme und sehe die Werte direkt. Mit der von mir verwendeten ausführlichen Schreibweise kommen alle Browser zurecht, die Flexbox kennen. Man kann sich die Schreibweise ja auch abspeichern und dann kopieren.
Bisher hatte ich mich gefreut, dass man bei Flexlayout Rahmen etc. nicht mehr mit calc in die Breite einrechnen muss
Das ist nicht richtig und reelle Anleitungen behaupten das auch nicht. Ich habe das aber leider auch schon des öfteren gelesen.
Ob Abstände berücksichtigt werden müssen oder nicht hängt nur vom Box-Modell (box-sizing) ab.
Standard ist das Content-Box-Modell ( box-sizing: content-box; ). Dabei müssen padding, border und margin berücksichtigt werden.
Mit dem Border-Box-Modell ( box-sizing: border-box; ) muss nur margin berücksichtigt werden.
Wobei bei Flexbox wieder einige Browser das Border-Box-Modell nicht berücksichtigen, auch wenn es vorgegeben wird. Bei Flexbox verwenden diese Browser grundsätzlich das Content-Box-Modell.
Da dagegen kein Kraut gewachsen ist verwende ich bei Flexbox grundsätzlich das Content-Box-Modell. Ansonsten müssten für die Problembrowser immer spezielle Lösungen erstellt werden, wobei mit etwas Pech einige übersehen werden. Mit Verwendung des Content-Box-Modells (also der Standardvorgaber aller Browser) hat man gleich alle Browser unter einem Hut.
Dabei verwende ich die calc-Anweisung für
flex-basis in einer ausführlichen, immer gleichen ausführlichen Schreibweise mit den von mir verwendeten Einheiten, durch die ich auch gleich an alle Werte erinnert werde. Ohne padding, border und margin sieht das CSS dann zum Beispiel so aus:
Code:
flex-basis: calc(50% - 0rem - 0px - 0rem)
Wobei das erste 0rem für das padding, das 0px für border und das zweite 0rem für margin steht.
Mein CSS für das Beispiel sieht damit so aus:
Code:
@media all {
article {
padding: 0.5rem;
border: 1px solid grey;
border-radius: 0.4rem;
display: flex;
flex-wrap: wrap;
}
section {
padding: 0.5rem;
border: 1px solid grey;
border-radius: 0.4rem;
margin: 0.5rem;
flex-grow: 0;
flex-shrink: 1;
flex-basis: calc(100% - 1rem - 2px - 1rem);
}
}
@media only screen and (min-width: 800px) {
section {
flex-basis: calc(50% - 1rem - 2px - 1rem);
}
}
@media only screen and (min-width: 1200px) {
section {
flex-basis: calc(33.33% - 1rem - 2px - 1rem);
}
}
wobei die seitlichen Abstände in der Regel doppelt berücksichtigt werden müssen, deshalb hier die 1rem und 2px. Die Werte musst du natürlich noch deiner Webseite anpassen.
Ich habe mal eine Beispielseite zum direkten Ausprobieren erstellt:
http://boratb.bplaced.net/index36.html
Gruss
MrMurphy