Flexbox-Grid
bearbeitet von marctrixHej Fred,
> Moinsen,
>
> > > In dem Codepen ist zwischen den Flexitems kein "Leerraum"
> >
> > Doch. Den siehst du nur nicht mehr weil Flexbox bereits aktiv ist. Nachdem der Leerraum verteilt ist, ist er natürlich weg.
>
> Okay, wenn man es so betrachtet muß ich dir recht geben.
Nichts davon erklärt aber das von mir geschilderte Problem.
Mir ging es um folgendes:
~~~CSS
.container {
display: flex;
flex-wrap: wrap;
}
.flex-item-default {
flex: 1 0 10em;
}
.flex-item-double {
flex: 2 0 20em;
}
~~~
~~~html
<!-- Zeile 1 -->
<div class="container">
<div class="flex-item-default">foo</div>
<div class="flex-item-default">foo</div>
<div class="flex-item-default">foo</div>
<div class="flex-item-default">foo</div>
<div class="flex-item-default">foo</div>
</div>
<!-- Zeile 2 -->
<div class="container">
<div class="flex-item-double">foo</div>
<div class="flex-item-double">foo</div>
<div class="flex-item-double">foo</div>
<div class="flex-item-double">foo</div>
<div class="flex-item-double">foo</div>
</div>
<!-- Zeile 3 -->
<div class="container">
<div class="flex-item-double">foo</div>
<div class="flex-item-default">foo</div>
<div class="flex-item-default">foo</div>
<div class="flex-item-double">foo</div>
<div class="flex-item-double">foo</div>
<div class="flex-item-default">foo</div>
<div class="flex-item-default">foo</div>
<div class="flex-item-double">foo</div>
<div class="flex-item-double">foo</div>
</div>
~~~
**Ergebnis**
Zeile 1 und Zeile 2:
Jedes zweite flex-item-default schließt bündig mit jedem ersten flex-item-double ab.
Zeile 3:
Keine Bündigkeiten mehr vorhanden.
**Frage**
Warum?
Marc