Flexbox - Elemente sollen doppelt so schnell wachen und schrumpfen

BodyLAB

Bekanntes Mitglied
Guten Tag zusammen,

ich hab eine Frage zur Flexbox und vielleicht kann mir ja jemand von euch Helfen :)
Meine Frage ist, ob es möglich ist in der Flexbox Elemente in einer Klasse doppelt so schnell wachsen zu lassen und andere Elemente im selben Flexboxcontainer und mit einer anderen Klasse doppelt so schnell schrumpfen zu lassen?

Ich versuche es derzeit mit flex-shrink und flex-grow doch ehrlich gesagt verstehe ich nicht wie das funktionieren soll.
Mein Code wäre dieser:
HTML:
<!DOCTYPE html>
<html lang="de">

<head>
    <title>aufgabe sowieso</title>
    <meta charset="UTF-8">

    <style>
        ul {
            margin: 0;
            padding: 0;
        }
        li {
            list-style-type: none;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
        }

        .out {
            background-color: blue;
            width: 100px;
            height: 100px;
            flex-shrink: 2;
        }

        .in {
            background-color: darkorange;
            width: 100px;
            height: 100px;
            flex-basis: 200px;
            flex-grow: 2;
        }

        li:nth-child(4n) {
            flex-basis: 100%;
        }
    </style>

</head>

<body>
    <ul class="container">
        <li class="out">1</li>
        <li class="in">2</li>
        <li class="out">3</li>

        <li></li>

        <li class="out">4</li>
        <li class="in">5</li>
        <li class="out">6</li>

        <li></li>

        <li class="out">7</li>
        <li class="in">8</li>
        <li class="out">9</li>
    </ul>
</body>
</html>

Wenn ich shrink und grow so nutze passiert nur das die Zeile sich über den gesamten Bildschirm erstreckt. Der innere Teil wird so weit gestreckt wie Platz vorhanden ist. Wenn man das Fenster nun kleiner macht werden die Elemente in der Klasse "in" eben auch kleiner doch "out" wird nicht kleiner es bleibt immer gleich :-(

Geht so etwas überhaupt?
 

osion

Bekanntes Mitglied
Ja, es ist möglich, in einer Flexbox Elemente mit unterschiedlichen Klassen unterschiedlich schnell wachsen oder schrumpfen zu lassen.

Die Eigenschaften flex-shrink und flex-grow können dafür verwendet werden. Sie bestimmen, wie sich die Größe eines Elements im Verhältnis zu den anderen Elementen im selben Flexbox-Container verändert, wenn Platz übrig bleibt oder wenn Platz fehlt.

flex-grow legt fest, wie schnell sich das Element vergrößern soll, wenn Platz übrig bleibt. Ein Wert von 2 bedeutet zum Beispiel, dass das Element doppelt so schnell wächst wie die anderen Elemente im Container.

flex-shrink legt fest, wie schnell sich das Element verkleinern soll, wenn Platz fehlt. Ein Wert von 2 bedeutet zum Beispiel, dass das Element doppelt so schnell schrumpft wie die anderen Elemente im Container.

In deinem Code sieht es so aus, als würdest du versuchen, die Elemente in der Klasse in doppelt so schnell wachsen zu lassen und die Elemente in der Klasse out doppelt so schnell schrumpfen zu lassen. Allerdings scheint es, dass dies nicht das gewünschte Verhalten erzeugt.

Eine Möglichkeit, um das gewünschte Verhalten zu erreichen, wäre, die Eigenschaft flex-basis zu verwenden. flex-basis legt die Größe eines Elements in seiner flexiblen Dimension fest und wird vor flex-grow und flex-shrink angewendet. Wenn du also flex-basis auf einen bestimmten Wert festlegst, wird das Element immer diese Größe haben, egal ob Platz übrig bleibt oder fehlt. Du könntest also die Klasse in so anpassen, dass sie eine flex-basis von 200px hat und flex-grow auf 2 setzt, wodurch sie doppelt so schnell wachsen würde, wenn Platz übrig bleibt.

Code:
.out {
  background-color: blue;
  width: 100px;
  height: 100px;
  flex-shrink: 2;
  flex-basis: 100px;
}

.in {
  background-color: darkorange;
  width: 100px;
  height: 100px;
  flex-basis: 200px; flex-grow: 2; }
 

KonradN

Super-Moderator
Mitarbeiter
@Agatha19: This is a german forum and you just repeated, what was already said. And the link is not really related to the problem - even the started of the thread was aware of the difference between html and css.
 
Ähnliche Java Themen

Ähnliche Java Themen

Neue Themen


Oben