Warum füllt nicht flex Element den verbleibenden Platz?

Ich versuche Elemente ausrichten FlexboxWarum füllt nicht flex Element den verbleibenden Platz?

jsFiddle mit: https://jsfiddle.net/x6m7qnyp/

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

 
.left { 
 
    flex: 15%; 
 
    background-color: rgb(255, 0, 0); 
 
    height: 150px; 
 
} 
 

 
.rightTop { 
 
    flex: 85%; 
 
    background-color: rgb(0, 255, 0); 
 
    align-self: flex-start; 
 
} 
 

 
.rightBottom { 
 
    flex: 85%; 
 
    background-color: rgb(0, 0, 255); 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    LEFT 
 
    </div> 
 
    <div class="rightTop">RIGHT TOP</div> 
 
    <div class="rightBottom">RIGHT BOTTOM</div> 
 
</div>

Wie Sie Sie das letzte Element unter dem .left div obwohl ich sehen kann, geht nach unten sogar Setze Flex auf 85%.

Ich möchte, dass das rechte untere Element den verbleibenden Platz unter dem rechten oberen Element füllt. Es sollte wie folgt aussehen:

Ich weiß, dass ich dies durch Umwickeln rechts oben und rechts unten Elemente mit einem Behälter erreichen können, aber ich möchte wissen, ob es einen Weg gibt, dies mit dem zu tun, aktuelles Markup Und können Sie bitte erklären, warum das rechte untere Element nach unten geht, anstatt den verbleibenden Platz zu füllen?

Quelle

2017-04-06 alinaish

Die oberen rechten oberen und rechten unteren div in einen Behälter wickeln.

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

 
.left { 
 
    flex: 15%; 
 
    background-color: rgb(255, 0, 0); 
 
width:15px; 
 
    flex-grow:0; 
 
} 
 

 
.rightTop { 
 
    background-color: rgb(0, 255, 0); 
 
    align-self: flex-start; 
 
} 
 

 
.rightBottom { 
 
    background-color: rgb(0, 0, 255); 
 
    height: 100px; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    LEFT 
 
    </div> 
 
    <div> 
 
    <div class="rightTop">RIGHT TOP</div> 
 
    <div class="rightBottom">RIGHT BOTTOM 
 
    </div> 
 
</div> 
 
</div>

Quelle

2017-04-06 21:54:41 repzero

Ja, ich weiß, dass es funktioniert, aber meine Frage ist, wie es mit dem aktuellen zu tun Markup und warum rechts unten Element geht – alinaish

Es ist, weil Sie einen Flex festgelegt haben von 85% auf jedem div, das ist größer als 100% Breite des übergeordneten Containers ... – repzero

Nicht nur, dass das Problem Sie Konzept von flex ist etwas seltsam, die Elemente werden horizontal ausrichten haben wie erwartet..try diese Werte anpassen und siehe – repzero

würde ich die richtigen Zeilen in einem Ich würde wickeln flexcolumn

.flex { 
 
    display: flex; 
 
} 
 

 
.left { 
 
    flex-basis: 15%; 
 
    background-color: rgb(255, 0, 0); 
 
    height: 150px; 
 
} 
 

 
.right { 
 
    flex-grow: 1; 
 
    flex-direction: column; 
 
} 
 

 
.rightTop { 
 
    background-color: rgb(0, 255, 0); 
 
} 
 

 
.rightBottom { 
 
    background-color: rgb(0, 0, 255); 
 
    flex-grow: 1; 
 
}

<div class="flex"> 
 
    <div class="left"> 
 
    LEFT 
 
    </div> 
 
    <div class="flex right"> 
 
    <div class="rightTop">RIGHT TOP</div> 
 
    <div class="rightBottom">RIGHT BOTTOM</div> 
 
    </div> 
 
</div>

Quelle

2017-04-06 21:55:59

yeah. Ich verstehe, dass es mit einem Wrapper funktionieren wird, aber ich verstehe nicht, warum es jetzt so funktioniert (warum das rechte untere Element ausfällt, wenn genügend Platz vorhanden ist). – alinaish

@alinaish, denn wenn Elemente umbrechen, wird eine neue Flex-Reihe erstellt. Das umbrochene Element beginnt also eine neue Zeile. –

Hey gerade auf die rechte Seite in einem eigenen Container genannt. Recht und geh von dort. Außerdem habe ich die Höhen von .rightTop und .rightBottom geändert.

HTML

<div class="container"> 
    <div class="left"> 
    LEFT 
    </div> 
    <div class="right"> 
    <div class="rightTop">RIGHT TOP</div> 
    <div class="rightBottom">RIGHT BOTTOM</div> 
    </div> 
</div>

CSS

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

.left { 
    flex: 15%; 
    background-color: rgb(255, 0, 0); 
    height: 150px; 
} 

.right { 
    flex: 85%; 
} 

.rightTop { 
    height: 20px; 
    background-color: rgb(0, 255, 0); 
    align-self: flex-start; 
} 

.rightBottom { 
    background-color: rgb(0, 0, 255); 
    height: 130px; 
}

Codepen Beispiel: https://codepen.io/StefanBobrowski/pen/bqyQWJ

Quelle

2017-04-06 21:56:06 StefanBob

Warum füllt nicht flex Element den verbleibenden Platz?

Antwort

Verwandte Themen