Wie kann ich mit Flexbox zwei Felder in einer Spalte neben einer Zeile ausrichten?

Question

Was würde ich tun möchte, ist ganz besonders, also habe ich ein Bild gezeichnet, es zu veranschaulichen:

ich dies leicht umsetzen können:

aber es doesn sehe auf dieser Seite nicht gut aus, weil das E-Element viel höher als C oder D ist.

Was ich möchte, ist für C und D zu stapeln, wenn das Browserfenster ist breit, aber nicht, wenn es eine mittlere Breite hat.

Ich versuche, dies mit CSS und Flexbox zu implementieren, und ich habe versucht, C und D in einem div zu gruppieren, aber das schafft Probleme auf dem mittleren Layout.

Answer 1

Flexbox ist 1D Layout gewünscht. Natürlich können Sie einige Nesting hinzufügen, einige feste Höhen, aber es ist 1D und ist hier keine perfekte Lösung.

Es ist viel besser, CSS Grid Layout hier zu verwenden, weil es 2D-Layout ist.

.grid { 
 
    display: grid; 
 
} 
 

 
/* just styles for demo */ 
 
.grid__item { 
 
    font-size: 3em; 
 
    padding: 20px; 
 
    background-color: orange; 
 
    color: white; 
 
    margin: 10px; 
 
    
 
    /* using flexbox for text centering */ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
/* medium screen */ 
 
@media screen and (min-width: 700px) and (max-width: 999px) { 
 
    .a { 
 
    grid-column: 1/span 2; 
 
    } 
 
} 
 

 
/* wide screen */ 
 
@media screen and (min-width: 1000px) { 
 
    .grid { 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
    } 
 
    
 
    .a { 
 
    grid-column: 1/span 2; 
 
    } 
 
    
 
    .d { 
 
    grid-row: 3; 
 
    } 
 
    
 
    .e { 
 
    grid-column: 2/span 2; 
 
    grid-row: 2/span 2; 
 
    } 
 
}

<div class="grid"> 
 
    <div class="grid__item a">A</div> 
 
    <div class="grid__item b">B</div> 
 
    <div class="grid__item c">C</div> 
 
    <div class="grid__item d">D</div> 
 
    <div class="grid__item e">E</div> 
 
</div>

Wenn Sie IE/Edge-Unterstützung müssen Sie manuell veraltete Syntax verwenden, und geben Platz für jede Zeile werden müssen. Die IE/Edge-Implementierung verfügt nicht über eine automatische Platzierung von Gitterzellen. Wenn Sie also nicht für jede Zelle grid-column/grid-row angeben, werden alle in der ersten Zelle gestapelt. Also für IE/Kanten -ms-grid-row und -ms-grid-column Standardwert ist 1. Demo:

.grid { 
 
    display: grid; 
 
} 
 

 
/* just styles for demo */ 
 
.grid__item { 
 
    font-size: 3em; 
 
    padding: 20px; 
 
    background-color: orange; 
 
    color: white; 
 
    margin: 10px; 
 
    
 
    /* using flexbox for text centering */ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
/* medium screen */ 
 
@media screen and (min-width: 700px) and (max-width: 999px) { 
 
    .grid { 
 
    display: -ms-grid; 
 
    -ms-grid-columns: 1fr 1fr; 
 
    } 
 
    
 
    .a { 
 
    -ms-grid-column: 1; 
 
    -ms-grid-column-span: 2; 
 
    grid-column: 1/span 2; 
 
    } 
 
    
 
    .b { 
 
    -ms-grid-row: 2; 
 
    } 
 
    
 
    .c { 
 
    -ms-grid-row: 2; 
 
    -ms-grid-column: 2; 
 
    } 
 
    
 
    .d { 
 
    -ms-grid-row: 3; 
 
    } 
 
    
 
    .e { 
 
    -ms-grid-row: 3; 
 
    -ms-grid-column: 2; 
 
    } 
 
} 
 

 
/* wide screen */ 
 
@media screen and (min-width: 1000px) { 
 
    .grid { 
 
    display: -ms-grid; 
 
    -ms-grid-columns: 1fr 1fr 1fr; 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
    } 
 
    
 
    .a { 
 
    -ms-grid-column: 1; 
 
    -ms-grid-column-span: 2; 
 
    grid-column: 1/span 2; 
 
    } 
 
    
 
    .b { 
 
    -ms-grid-column: 3; 
 
    } 
 
    
 
    .c { 
 
    -ms-grid-row: 2; 
 
    } 
 
    
 
    .d { 
 
    -ms-grid-row: 3; 
 
    grid-row: 3; 
 
    } 
 
    
 
    .e { 
 
    -ms-grid-row: 2; 
 
    -ms-grid-row-span: 2; 
 
    grid-row: 2/span 2; 
 
    -ms-grid-column: 2; 
 
    -ms-grid-column-span: 2; 
 
    grid-column: 2/span 2; 
 
    } 
 
}

<div class="grid"> 
 
    <div class="grid__item a">A</div> 
 
    <div class="grid__item b">B</div> 
 
    <div class="grid__item c">C</div> 
 
    <div class="grid__item d">D</div> 
 
    <div class="grid__item e">E</div> 
 
</div>

Wenn Sie hier testen möchten, Ändern der Größe jsFiddle ist.

Answer 2

demo

Änderung der Flex-Wert, wie Sie

.box { 
 
    background-color: green; 
 
    margin: 5px; 
 
    /* padding: 30px; */ 
 
} 
 

 
.one { 
 
    display: flex; 
 

 
} 
 

 
.a { 
 
    flex: 3; 
 
} 
 

 
.b { 
 
    flex: 2; 
 
} 
 

 
.two { 
 
    display: flex; 
 
    
 
} 
 

 
.three { 
 
    flex: 2; 
 
} 
 

 
.four { 
 
    flex: 3; 
 
}

<div class="main"> 
 
    <div class="one"> 
 
     <div class="a box">a</div> 
 
     <div class="b box">b</div> 
 
    </div> 
 
    <div class="two"> 
 
     <div class="three"> 
 
      <div class="c box">c</div> 
 
      <div class="d box">d</div> 
 
     </div> 
 
     <div class="four box"> 
 
      <div class="e">e</div> 
 
     </div> 
 
    </div> 
 

 
</div>