Flex-wrap

[MrMurphy1]

Hallo

Ist es möglich, daß man dem ersten item eine fixe Größe gibt und die zweite bzw. weiteren teilen sich den Rest auf?

Ja. Das geht mit den CSS-Eigenschaften

• flex-grow
• flex-shrink
• flex-basis

Die können auch zu

flex

zusammengefasst werden. Aber nur mit der Aufteilung ist im Bedarfsfall calc möglich.

Wenn flex-grow und flex-shrink den Wert 0 haben ist die Breite von flex-basis fest. Zum Beispiel

      article {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 250px;
      }

Mit dem Wert 1 für flex-grow und flex-shrink ist der Container flexibel, zum Beispiel

      section {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: auto;
      }

Auf flex-wrap sollte dann verzichtet werden. Falls doch ein Zeilenumbruch erforderlich ist müssen eventuell padding, border und margin mit calc berücksichtigt werden. Bei Zeilenumbrüchen zickt Flexbox manchmal rum.

Gruss

MrMurphy