Flexbox: Füllen verbleibenden Platz aber noch wickeln

Gibt es eine Möglichkeit zu sagen flexbox-Elemente füllen den übrigen Raum aber wickeln so bald, wie Sie immer kleiner sind als Ihre Inhalte.

Einige der Elemente, die einen festen Prozentsatz der Breite aber.

HTML

<div class="grid">
  <div class="grid__item">column auto</div>
  <div class="grid__item one-third">column 33.333%</div>
  <div class="grid__item one-third">column 33.333%</div>
  <div class="grid__item">column auto</div>      
</div>

CSS

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: gray;
}

.grid__item {
  background: red;
  flex: 1;
}

.one-third {
  flex-basis: 33.333%;
  background: green;
}

Möchte ich die Feste Breite Elemente (grün), haben immer eine Breite von 33.333%. Die anderen Elemente (rot) sollte füllen den übrigen Raum. Wenn der Bildschirm immer kleiner, ich will, dass die Gegenstände zu wickeln, wenn es nicht genug Platz zum anzeigen Ihrer Inhalte.

Dachte ich, ich könnte einfach verwenden flex: 1 und flex-wrap: wrap auf den container, so etwas zu tun, aber wie Sie vielleicht sehen, in der Stift es fließt nicht bei allen. Wenn ich entfernen flex: 1 im .grid__item diese Art von wickeln, aber nicht den ganzen Weg hinunter zu sehr kleinen Bildschirmgrößen.

InformationsquelleAutor Daniel | 2015-08-06