Flexbox-Reihe, die Säulen nach unten drückt

Question

Ich habe Flex-Layouts seit einer Weile jetzt verwendet. hauptsächlich der Heilige Gral Typ Layout und es funktioniert gut.

Heute beschlossen, das gleiche zu versuchen, um mir zu helfen, mehr über Flexbox zu lernen. aber Spalten auf der rechten Seite für Seitenleiste Bereich und Zeilen als das Logo/Überschrift und Seite Divs.

Ich habe dies in einen Codepen eingeben, so dass Sie den Markup-Code selbst sehen können. Mein Problem ist das Logo/die Überschrift und die Hauptseite, wenn sie auf Zeile gesetzt ist, drückt die Spalten nach unten.

<div class="wrapper"> 
     <div class="nav">logo content and site banner goes here 
     <div class="spacer"> 

</div> 
    <div class="content">main page content goes here</div> 
     </div> 


    <div class="one">page index goes here</div> 
    <div class="two">twitter logo goes here</div> 
    <div class="three">chatbox goes here</div> 

    </div> 
div { 

    box-sizing: border-box; 
} 

.wrapper { 
    border: 2px solid blue; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
    align-items: flex-end; 
    position: relative; 


} 

.nav { 

    flex-direction: row; 
    border: 2px solid green; 
    width: 100%; 
    height: 100px; 
    align-self: flex-start; 
    padding-left: 8px; 
    margin-bottom: 4px; 
} 

.spacer { 

    height: 140px; 
    width: 100%; 
} 

.content { 

    flex-direction: row; 
    border: 2px solid green; 
    height: 40px; 
    padding-left: 8px; 
    align-self: flex-start; 




} 

.one { 
    width: 200px; 
    height: 200px; 
    border: 2px solid red; 
    flex-grow: 0; 
    padding: 8px; 


} 

.two { 
    width: 200px; 
    height: 200px; 
    border: 2px solid red; 
    flex-grow: 0; 
    padding: 8px; 

} 

.three { 
    width: 200px; 
    height: 200px; 
    border: 2px solid red; 
    flex-grow: 0; 
    padding: 8px; 
} 

https://codepen.io/anon/pen/GmZWvp

selbst wenn die Breite etwas Einstellung kleiner, bevor es sogar die Spalten erreicht der Block die Spalten drückt, nach unten, wie könnte ich das tun wo wirkt sich das nicht auf die rechte Spalte aus?

Ich weiß, ich könnte positionieren: absolute die Hauptseite div, oder erstellen Sie ein verschachteltes div in logo/überschrift und geben Sie Höhe von sagen 120px; um es unter die Überschrift des Logos zu bringen.

Aber es muss eine Möglichkeit geben, eine Zeile neben eine Spalte zu setzen, ohne dass die Spalte nach unten gedrückt wird. da das div/row für die Logoüberschrift/Hauptseite ein Blockelement ist.

Wenn Sie wissen, wie das mit mir bitte zu tun, lassen Sie weiß, was zu ändern, wo und warum usw. Auch dies ist nicht für die Produktion, ist es nur, um zu sehen, ob ich dieses schrullige Puzzle lösen kann.

Answer 1

Erstens, auch wenn Sie display: flex auf dem wrapper setzen, können Sie nicht gesetzt flex-direction: row (oder Spalte) auf ihre Kinder, ihre Richtung zu ändern. Die Eigenschaft flex-direction sollte auf dem Flex-Container festgelegt werden, in diesem Fall wrapper. Wenn Sie Richtung auf flex Elemente, die zu einem flexiblen Behälter ändern möchten, müssen Sie sie wickeln und das verschachtelte Wrapper beide machen sein ein flexibles Element und ein Flex-Container, hier mit dem side Wrapper in meiner ersten Probe durchgeführt

wenn Sie Ihr Markup ein wenig neu anordnen, können Sie sich diese

div { 
 
    box-sizing: border-box; 
 
} 
 

 
.wrapper { 
 
    border: 2px solid blue; 
 
    display: flex; 
 
} 
 

 
.nav { 
 
    border: 2px solid green; 
 
    width: 100%; 
 
    height: 100px; 
 
    padding-left: 8px; 
 
    margin-bottom: 4px; 
 
} 
 

 
.content { 
 
    flex: 1; 
 
    border: 2px solid green; 
 
    height: 40px; 
 
    padding-left: 8px; 
 
} 
 

 
.side { 
 
    width: 200px; 
 
} 
 

 
.one { 
 
    height: 200px; 
 
    border: 2px solid red; 
 
    padding: 8px; 
 
} 
 

 
.two { 
 
    height: 200px; 
 
    border: 2px solid red; 
 
    padding: 8px; 
 
} 
 

 
.three { 
 
    height: 200px; 
 
    border: 2px solid red; 
 
    padding: 8px; 
 
}

<div class="nav">logo and site banner goes here</div> 
 

 
<div class="wrapper"> 
 

 
    <div class="content">main page content goes here</div> 
 

 
    <div class="side"> 
 
    <div class="one">page index goes here</div> 
 
    <div class="two">twitter logo goes here</div> 
 
    <div class="three">chatbox goes here</div> 
 
    </div> 
 

 
</div>

---

wenn Sie nicht können oder nicht wollen, um Markup zu ändern, die n müssen Sie flexbox mit absoluter Positionierung kombinieren.

div { 
 
    box-sizing: border-box; 
 
} 
 

 
.wrapper { 
 
    position: relative; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.nav { 
 
    border: 2px solid green; 
 
    width: 100%; 
 
    height: 100px; 
 
    padding-left: 8px; 
 
    margin-bottom: 4px; 
 
} 
 

 
.content { 
 
    width: calc(100% - 200px); 
 
    border: 2px solid green; 
 
    height: 40px; 
 
    padding-left: 8px; 
 
} 
 

 
.one, .two, .three { 
 
    position: absolute; 
 
    right: 0; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px solid red; 
 
    padding: 8px; 
 
} 
 

 
.one { 
 
    top: 104px; 
 
} 
 

 
.two { 
 
    top: 304px; 
 
} 
 

 
.three { 
 
    top: 504px; 
 
}

<div class="wrapper"> 
 

 
    <div class="nav">logo and site banner goes here</div> 
 

 
    <div class="content">main page content goes here</div> 
 

 
    <div class="one">page index goes here</div> 
 
    <div class="two">twitter logo goes here</div> 
 
    <div class="three">chatbox goes here</div> 
 

 
</div>