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:
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?
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?