`Flex-Box: Grow` passt sich nicht an

Andal91 · 1. März 2019

Hallo zusammen,

ich hoffe Ihr könnt mir weiterhelfen, ich bin am verzweifeln.

Ich habe eine Wrapper indem 3 Div Boxen sind: Links - > Abstand, Mitte - > Inhalt, rechts - > Abstand.

(Wobei die Abstämde nur ein Platzhalter für andere Inhalte sind)

Ich gebe dem Elternelement Display: flex, den Abständen grow 1 und der Mitte eine feste Breite, die ich auch unbedingt brauche.

Wenn ich bei meinem Script den Browser zusammen schiebe, verkleinert sich die Breite der Abstände bis nicht mehr alles in eine Zeile passt und dann gibt es im Inhalt einen Zeilenumbruch.

Soweit so gut, nur habe ich der Mitte nochmal 3 Boxen und sobald der Zeilenumbruch stattgefunden hat, sollen die Abstände wieder den verfügbaren Platz aufbrauchen. Aber aktuell bleibt dann die Breite der Mitte so wie sie ist.

Code

wrapper {
    display:       flex;
}
.abstand {
    flex-grow:     1;
    border:        1px solid red;
}

.boxen_wrapper {
    flex-grow:     0;
    border:        1px solid red;
    width:         750px;
    display:       flex;flex-wrap: wrap;
}

.box {
    flex-shrink:     0;
    width:           250px;
    border:          1px solid green;
    box-sizing:      border-box;
}

Alles anzeigen

Code

<div class="wrapper">

    <div class="abstand">Abstand1</div>

    <div class="boxen_wrapper">
        <div class="box">Inhalt 1</div>
        <div class="box">Inhalt 2</div>
        <div class="box">Inhalt 3</div>
    </div>

    <div class="abstand">Abstand2</div>

</div>

Alles anzeigen

Sempervivum · 1. März 2019

Zunächst mal hast Du im CSS vor dem wrapper den Punkt vergessen, aber das ist wahrscheinlich nur ein Kopierfehler.

Ich vermute, es liegt daran, dass Du dem .boxen_wrapper eine feste Breite gegeben hast, dadurch wird wohl das flexible Verteilen ausgebremst. So wie Du es dir vorstellst, habe ich es leider nicht hinbekommen, nur indem ich mit einer Mediaquery die Anordnung von horizontal nach vertikal umgeschaltet habe:

Code

        .wrapper {
            display: flex;
        }

        .abstand {
            flex: 1;
            border: 1px solid red;
        }

        .boxen_wrapper {
            flex: 0 0 auto;
            border: 1px solid red;
            display: flex;
            flex-wrap: nowrap;
        }

        .box {
            width: 250px;
            border: 1px solid green;
        }

        @media (max-width: 1000px) {
            .boxen_wrapper {
                flex-direction: column;
            }
        }

Alles anzeigen

Andal91 · 1. März 2019

Ok danke, ich glaube das ist so garnicht machbar wie ich mir das vorstelle.

Muss ich wohl mit Mediaquery arbeiten.

Trotzdem danke.

`Flex-Box: Grow` passt sich nicht an

Jetzt mitmachen!

Teilen

Tags