zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Flexbox: flex-grow und flex-shrink

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.04.2019, 18:31
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard Flexbox: flex-grow und flex-shrink

Moin.


Mir ist die Interpretation der Specs zu flex-grow und flex-shrink noch nicht klar.


"This <number> component sets flex-grow longhand and specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed."

https://www.w3.org/TR/css-flexbox-1/#flex-grow-property


Beispiel:


HTML-Code:
.flex-container { display: flex; } .flex-container  .flex-item { flex: 1 }.flex-container  .flex-item { flex-grow: 2; }.flex-container  .flex-item { flex-grow: 3; }<div class="flex-container">  <div class="flex-item">...</div>  <div class="flex-item">...</div></div>
Bei zwei Flex-Items mit Text, verstehe ich das Verhalten. Text 1 nimmt 2 Teile der Gesamtbreite ein, Text 2 nimmt 3 Teile ein.
Als Bruch: 2/5 und 3/5

Wenn jedoch in ein hochaufgelöstes Bild in Flex-Item 1 steht, dehnt es sich solange aus, wie Platz im Flex-Container ist. Der Reste bleibt dann für Flex-Item 2 übrig.


Die Methode ist also nicht geeignet, maximale relative Breiten für Flex-Items festzulegen.


Ist das erstmal so korrekt?
__________________

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.04.2019, 19:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.066
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Richtig, mit den maximalen und minimalen Breiten haben weder flex-grow noch flex-shrink etwas zu tun.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Flexbox Soelg CSS 1 21.05.2018 00:32


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:44 Uhr.