Positionierung mit Flexbox

Stef · 26. November 2021

Hey,

ich habe folgendes Layout mit Flexbox erstellt:flex.PNG

Nun füllen die ganzen Container bei einer Höhe von 100% nur 1/4 der ganzen Website. Wenn ich dem linken Container eine Höhe von 100% zuweise, wird dieser sogar nur so groß dargestellt wie der erste Container rechts.

Wie kann das sein? & Wie kann ich die ganzen Container auf die komplette Höhe strecken?

Hier ist der Code:

HTML:

HTML

<main>
<section id="left">
<p>Left</p>
</section>
<section id="right">
<div>
<p>Right - First</p>
</div>
<div class="row">
<article>
<p>Lorem Ipsum</p>
</article>
<article>
<p>Lorem Ipsum</p>
</article>
<article>
<p>Lorem Ipsum</p>
</article>
</div>
<div>
<p>Right - Third</p>
</div>
<div>
<p>Right - Fourth</p>
</div>
</section>
</main>

Alles anzeigen

CSS:

CSS

html, body{
height: 100%;
margin: 0em;
padding: 0em;
}
main{
display: flex;
flex-direction: row;
}
main section#left{
flex-grow: 2;
background-color: darkkhaki;
align-items: stretch;
}
main section#right{
display: flex;
flex-direction: column;
flex-grow: 3;
}
#right div{
padding: 0em;
margin: 0em;
}
main section#right div:first-child{
background-color: darkorange;
height: 30%;
}
main section#right div:nth-child(3){
background-color: darkturquoise;
height: 30%;
}
main section#right div:nth-child(4){
background-color: dodgerblue;
height: 10%;
}
main section#right div:nth-child(4) p{
margin: 0em;
}
main section#right .row{
display: flex;
flex-direction: row;
background-color: darkred;
height: 30%;
}
main section#right .row article{
width: 33.33%;
border: 1px solid black;
}

Alles anzeigen

Sempervivum · 26. November 2021

Zitat

Wie kann das sein? & Wie kann ich die ganzen Container auf die komplette Höhe strecken?

Du hast zwar html und body auf die volle Höhe gestreckt, aber was fehlt ist eine Anweisung, die dem main-Container sagt, dass er die volle Höhe ausfüllen soll:

Code

main {
display: flex;
flex-direction: row;
height: 100%;
}

Davon abgesehen ist IMO ist der main-Container überflüssig, denn body ist für Styling nicht tabu. Außerdem wäre es konsequent, statt der Maße in Prozent die Flex-Anweisungen zu verwenden. Dann könnte das CSS so aussehen:

Code

html,
body {
height: 100%;
margin: 0em;
padding: 0em;
}
body {
display: flex;
}
section#left {
flex-grow: 2;
background-color: darkkhaki;
align-items: stretch;
}
section#right {
display: flex;
flex-direction: column;
flex-grow: 3;
}
#right div {
padding: 0em;
margin: 0em;
}
section#right div:first-child {
background-color: darkorange;
flex: 3;
}
section#right div:nth-child(3) {
background-color: darkturquoise;
flex: 3;
}
section#right div:nth-child(4) {
background-color: dodgerblue;
flex: 1;
}
section#right div:nth-child(4) p {
margin: 0em;
}
section#right .row {
display: flex;
flex-direction: row;
background-color: darkred;
flex: 3;
}
section#right .row article {
flex: 3;
border: 1px solid black;
}

Alles anzeigen

Stef · 29. November 2021

Aso okay. Ich verstehe.

Vielen Dank dir

Positionierung mit Flexbox

Ähnliche Themen

Website verhalten ist "komisch"

Logo positionieren und Größe anpassen