Flexbox responsive Layout

Question

Ich spiele mit Flexbox und brauche ein wenig Hilfe. Ich möchte ein großes quadratisches Element auf der linken Seite und ein Raster aus vier kleineren Elementen, die gleich der Größe der ersten nach rechts sind.

Bisher habe ich dies:

#flex { 
 
    display: flex; 
 
} 
 
.flex-container-inner { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    align-content: stretch; 
 
    flex-wrap: wrap; 
 
    margin-left: 10px; 
 
} 
 
.flex-item { 
 
    padding: 10px; 
 
    flex-basis: auto; 
 
    flex: 0 0 47%; 
 
    min-height: 100px; 
 
    margin-bottom: 10px; 
 
    word-wrap: break-word; 
 
    background-color: red; 
 
}

<div style="margin-top:30px;padding-top:1px;" id="flex"> 
 
    <div class="flex-item"> 
 
    dhhrth rthrthrth rth rhrthrth 
 
    </div> 
 
    <div class="flex-container-inner"> 
 
    <div class="flex-item"> 
 
     yt e ert et e 
 
    </div> 
 
    <div class="flex-item"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, 
 
    </div> 
 
    </div> 
 
</div>

http://codepen.io/DaveBatt83/pen/yVbGQG

Ich verstehe nicht, warum die vier kleinere Elemente übereinander stapeln, wenn die Breite des Bildschirms reduziert , und ich möchte auch eine Mindestbreite der großen festlegen, so dass sie an bestimmten Haltepunkten die volle Breite einnimmt. Ist das möglich

Ich möchte das erste Element 47% der Breite, dann durch Hinzufügen eines verschachtelten Containers Ich möchte zwei Zeilen von zwei Elementen bei 47% innerhalb des geschachtelten Containers erstellen. Die 47% sollen einen Abstand zwischen ihnen schaffen, indem sie Leerzeichen dazwischen verwenden.

Das alles scheint zu funktionieren, aber wenn die Bildschirmgröße reduziert wird, werden die zwei Reihen von zwei zu einer Spalte der 4 Elemente.

Answer 1

Ich habe den Namen der verschachtelten Flex-Elemente für Klarheit geändert. Höchstwahrscheinlich hatten Sie Probleme, weil Ihnen box-sizing: border-box fehlte.

#flex { 
 
    display: flex; 
 
    background-color: peachpuff; 
 
    justify-content: space-between; 
 
} 
 
.flex-item, 
 
.flex-container-inner, 
 
.flex-item-inner { 
 
    flex: 0 0 47%; 
 
    box-sizing: border-box; 
 
} 
 
.flex-item, 
 
.flex-item-inner { 
 
    padding: 10px; 
 
    min-height: 100px; 
 
    margin-bottom: 10px; 
 
    word-wrap: break-word; 
 
    background-color: red; 
 
} 
 
.flex-container-inner { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    flex-wrap: wrap; 
 
}

<div style="margin-top:30px;padding-top:1px;" id="flex"> 
 
    <div class="flex-item"> 
 
    dhhrth rthrthrth rth rhrthrth 
 
    </div> 
 
    <div class="flex-container-inner"> 
 
    <div class="flex-item-inner"> 
 
     yt e ert et e 
 
    </div> 
 
    <div class="flex-item-inner"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item-inner"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item-inner"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, 
 
    </div> 
 
    </div> 
 
</div>