Flexbox Problem

B

BodyLAB

Bekanntes Mitglied
Hallo zusammen,

ich habe ein Problem mit Flexbox :-(

Kurz und Knapp, wie bekomme ich 3 Elemente in eine Zeile?
Wie schafft man es das Elemente 2x schneller wachsen oder schrumpfen?

Hier mal der Code:

Code: 
<!DOCTYPE html>

<html>

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

    <style>
        #container {
            display: flex;
            flex-wrap: wrap;

            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .out {
            background: yellow;
            padding: 5px;
            width: 200px;
            height: 150px;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;

            line-height: 150px;
            color: white;
            font-weight: bold;
            font-size: 3em;
            text-align: center;

            flex-grow: 1;
        }

        .in {
            background: red;
            padding: 5px;
            width: 200px;
            height: 150px;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;

            line-height: 150px;
            color: white;
            font-weight: bold;
            font-size: 3em;
            text-align: center;

            flex-grow: 2;
        }
    </style>


</head>

<body>

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

</body>

</html>

Die Roten Kästchen sollen 2x schneller wachsen und die Gelben sollen 2x schneller schrumpfen.
 
Oneixee5

Oneixee5

Top Contributor
3 Element in eine Zeile kann man so anlegen. Wie flex-grow genau funktioniert weiß ich aber auch nicht.
HTML: 
<!DOCTYPE html>

<html>

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

    <style>
        ul {
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
        }
        
        ul li {
      list-style: none;
      flex-basis: 33.333333%;
    }
    
    .out {
            background: yellow;
            height: 150px;
            color: white;
            font-weight: bold;
            font-size: 3em;
            text-align: center;
            flex-grow: 1;
            flex-basis: 25%;
            // Set margin on the child element instead of padding on your flex item.
        }
        
        .in {
            background: red;
            height: 150px;
            color: white;
            font-weight: bold;
            font-size: 3em;
            text-align: center;
            flex-grow: 2;
            flex-basis: 50%;
            // Set margin on the child element instead of padding on your flex item.
        }

    </style>


</head>

<body>

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

</body>

</html>
 
B

BodyLAB

Bekanntes Mitglied
Danke :)
So sieht es schon mal gut aus.

Jetzt verstehe ich nur nicht wie man die Roten Käste doppelt so schnell wachsen lässt und die Gelben doppel so schnell schrumpfen lässt :-(

Code: 
<!DOCTYPE html>

<html>

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

    <style>
        #container {
            display: flex;
            flex-wrap: wrap;
 
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
            flex-basis: 30%;
        }

        .out {
            background: yellow;
            padding: 5px;
            margin: 10px;

            line-height: 150px;
            color: white;
            font-weight: bold;
            font-size: 3em;
            text-align: center;

        }

        .in {
            background: red;
            padding: 5px;
            margin: 10px;

            line-height: 150px;
            color: white;
            font-weight: bold;
            font-size: 3em;
            text-align: center;

        }
    </style>


</head>

<body>

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

</body>

</html>

Hier ist es ganz schön beschrieben: Mediaevent CSS Flex

Wenn man das flex-basis raus nimmt und bei den Roten Kasten dann: flex-grow: 2 und bei den Gelben flex-grow: 1 macht, sollte es stimmen. Das einzige Problem was ich dann wieder habe ist, das eben nicht 3 Elemente in einer Zeile sind.

Vielleicht hat ja noch jemand eine Idee :cool:
 
Zuletzt bearbeitet:
Ähnliche Java Themen
  Titel Forum Antworten Datum
B Flexbox - Elemente sollen doppelt so schnell wachen und schrumpfen HTML / CSS 2
B Canvas in Flexbox with flex-direction: column; HTML / CSS 0
PhilipMJNE CSS in HTML via Link einbinden PROBLEM ! HTML / CSS 22
Anfänger2011 checkbox:checked -> display:none Problem HTML / CSS 3
J Problem mit URL zu LOGO in CSS HTML / CSS 1
R Problem mit Listen im Footer HTML / CSS 2

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben