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.

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.

Nun, das habe ich soweit intus. Getestet habe ich nach meiner Möglichkeit am iMac 27" und 13" MacBook Pro. Ein Bekannter hat sich die Seite mit seinem tablet angesehen und bis auf ein paar Kleinigkeiten nichts gefunden. Außer dem persönlichen Layout-Eindruck ist es am tablet für den Benutzer lesbar. Lediglich am Mobiltelephon, also kleineren Viewports, gibt es Probleme.
Beim Hauptmenü paßt alles; nicht aber wenn ich ein Rezept in einem neuen Tab aufrufe. Wie zu sehen ist, habe ich auf der Seite die Liste mit den Rezeptnamen. Rechts davon wird das Rezept angezeigt. Beide items sind in einem Container zentriert. Die Liste benötigt eine Mindestbreite, während das Rezept sich den restlichen Platz nimmt. Somit haben flex-grow und flex-shrink den Wert 0 und die Breite von flex-basis ist fest. Läßt sich das auch so steuern, daß man flex-shrink auf 1 setzt aber nur bis zu einer gewissen Breite da die Liste ja noch lesbar bleiben soll.
Eine etwaige Lösung:
Der Container ist mit 70% Breite zentriert ansonst würde das am iMac ziemlich verloren aussehen. Somit verbleiben links und rechts aufgeteilt 30%. Dies geht bei einem tablet bzw. Mobiltelephone ab. Wie läßt sich das steuern, daß sich der Container ab einer Viehport-Breite auf 100% vergrößert?
Eine weitere Möglichkeit wäre die Liste auszublenden in ein kleines Kästchen wie ich schon gesehen habe. Wenn man darauf klickt bekommt man die Liste mit den links. Mit einer Auswahl bekommt man dann nur das Rezept. Wäre das eine Lösung? Welche ist die vernünftigere? Wo finde ich so einen Beispielcode?

Eine weitere Frage hätte ich dazu, auch wenn es nicht direkt mit dem einleitendem Thema zu tun hat, aber zumindest mit der Darstellung mit IOS- und ähnlichen Systemen. In Lektüren liest man immer, daß die Adresse mittels "@" und den Namen angegeben wird und beim auswählen soll die Email-Adresse angezeigt werden. Bei Mobiltelephonen ist hover ja nicht möglich. Wie macht man das bei solchen Geräten? Sind außerdem tooltips hier nicht möglich. Unverständlich ist mir allerdings warum der link nicht funktioniert? Auch wenn mit hover der Code nicht ausgeführt wird, der Adress-link ist ja trotzdem vorhanden?