Wie verwende ich Flexbox?

Question

Ich habe ein Layout wie folgt aus:

<div class="outer"> 
    <div class="inner"></div> 
    <div class="inner"></div> 
    <div class="inner"> 
    <div class="deeper"> 
     <div class="newLineContent"></div> 
     <div class="newLineContent"></div> 
     <div class="newLineContent"></div> 
    </div> 
    </div> 
</div> 
<div class="outer"> 
    <div class="inner"></div> 
    <div class="inner"></div> 
    <div class="inner"> 
    <div class="deeper"> 
     <div class="newLineContent"></div> 
     <div class="newLineContent"></div> 
     <div class="newLineContent"></div> 
    </div> 
    </div> 
</div> 

ich die div s wie auszurichten haben: Alle die div s mit „äußeren“ Klasse von neuen Zeile und alle div s mit „inneren“ Klasse starten hat in der gleichen Zeile in „äußeren“ div und die div s mit tieferer Klasse innen „außen“ div sollte von neuer Linie und dem „newLineContent“ div s hat zu sein in der gleichen Zeile in „tiefer“ div s

beginnen zu sein

Wie erreiche ich das mit der flexbox? Oder gibt es einen anderen Weg, es zu erreichen?

Answer 1

.outer{ 
    display: flex; 
} 

Einfach so! Wie Sie die Eltern- und Kinderoptionen konfigurieren, hängt vom gewünschten Effekt ab.

Answer 2

Try this:

.outer { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.inner:last-child .deeper { 
 
    display: flex; 
 
}

<div class="outer"> 
 
    <div class="inner">1.1</div> 
 
    <div class="inner">1.2</div> 
 
    <div class="inner">1.3 
 
    <div class="deeper"> 
 
     <div class="newLineContent">1.3.1</div> 
 
     <div class="newLineContent">1.3.2</div> 
 
     <div class="newLineContent">1.3.3</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="outer"> 
 
    <div class="inner">2.1</div> 
 
    <div class="inner">2.2</div> 
 
    <div class="inner">2.3 
 
    <div class="deeper"> 
 
     <div class="newLineContent">2.3.1</div> 
 
     <div class="newLineContent">2.3.2</div> 
 
     <div class="newLineContent">2.3.3</div> 
 
    </div> 
 
    </div> 
 
</div>

Mit Ihrem aktuellen HTML-Struktur dies ist das Ergebnis Sie erhalten. Flex-Elemente von .inner: last-child .deeper können nicht die volle Breite des Browsers dehnen, da .deeper ein Drittel des übergeordneten Elements darstellt, d. H.

Answer 3

Man kann ohne Flexbox ähnlich machen, dachte Flexbox scheint in diesem Fall die beste zu sein.

.outer, 
 
.deeper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.inner { 
 
    flex-grow: 1; 
 
    padding: 20px 10px; 
 
    border: 1px solid white; 
 
    background: lightgray; 
 
} 
 
.inner:last-child { 
 
    flex-basis: 100%; 
 
} 
 
.newLineContent { 
 
    flex-grow: 1; 
 
    padding: 10px; 
 
    border: 1px solid white; 
 
    background: lightgray; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"> 
 
    <div class="deeper"> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="outer"> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"> 
 
    <div class="deeper"> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
    </div> 
 
    </div> 
 
</div>

---

basierend auf einem Kommentar Aktualisiert

Wenn die deeper ein Kind zu einem der inner sein kann, und ähnliches Ergebnis zu erzielen, würde man entweder braucht einen Elternteil Selektor, der nicht existiert, oder geben Sie der inner eine zusätzliche Klasse für diejenigen, die eine deeper enthalten.

Eine andere mögliche Abhilfe könnte die Verwendung von Viewport-Einheiten vw sein.

.outer, 
 
.deeper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: calc(100vw - 40px); /* 40px to make up for body's margins/scrollbar */ 
 
    margin: 0 auto; 
 
} 
 
.inner { 
 
    flex-grow: 1; 
 
    padding: 20px 10px; 
 
    border: 1px solid white; 
 
    background: lightgray; 
 
} 
 
.deeper { 
 
    width: calc(100vw - 62px); /* 62px is to make up for "inner" padding/border, 22px, 
 
            and 40px for body's margins/scrollbar  */ 
 
} 
 
.newLineContent { 
 
    flex-grow: 1; 
 
    padding: 10px; 
 
    border: 1px solid white; 
 
    background: lightgray; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"> 
 
    <div class="deeper"> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="outer"> 
 
    <div class="inner"></div> 
 
    <div class="inner"> 
 
    <div class="deeper"> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
     <div class="newLineContent"></div> 
 
    </div> 
 
    </div> 
 
    <div class="inner"></div> 
 
</div>