Flex-wrap

[franzsen]

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.

Ja, das ist mir bereits bekannt. Calc?

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;
      }

Muß in diesem Fall überhaupt flex-grow bzw. flex-shrink zusätzlich angegeben werden oder reicht eine Eingabe? Welche Eingabe erfordert dann das zweite bzw.dritte item ...? Beispielsweise habe ich ein item mit Navigation das ja eigentlich eine feste Breite haben kann bzw. soll, da es sich ja nicht ändert. Das zweite item soll den Rest ausfüllen. Allerdings erübrigt dann sich "Justify-content"? Jedoch muß beim ersten item margin-right gesetzt werden um einen Abstand zwischen beiden items zu bekommen. Ich habe bei Navigation flex-basis: 250px; gesetzt und section flex-grow: 1; damit wird der gesamte Container ausgefüllt. Sollen die Breite von items generell mit flex-basis und nicht mit width festgelegt werden?

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.

Das war mir aus einigen Beispielen klar. Es wird immer im Verhältnis a:b:... dargestellt. Was bringt es flex-grow: 1; und flex-shrink: 1; gleichzeitig zu setzen; Gleichzeitig vergrößern bzw. verkleinern?