Flexbox行將列向下推

Question

我一直在使用flex佈局一段時間。 主要是聖盃型佈局，效果很好。

今天決定嘗試創建相同的東西來幫助我瞭解有關flexbox的更多信息。 ，但使用右側的欄作爲側欄區域，行作爲標誌/標題和頁面div。

我已經把它放在一個codepen中，所以你可以自己看到標記代碼。 我的問題是徽標/標題和主頁設置爲行時向下推動列。

<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

即使設置的寬度更小的東西甚至達到列 塊推列前，下來，我怎麼能做到這一點它不會影響右側的列？

我知道我可以定位：絕對主頁div，或者在logo /標題 中創建一個嵌套div，並給它120px的高度;讓它進入標識標題下方。

但是，必須有一種將列放在列旁邊的方法，而不必將列向下推。 ，因爲標題標題/主頁面的div /行是塊元素。

如果你知道如何做到這一點，請讓我知道要改變什麼，在哪裏以及爲什麼等。 這又不是生產，只是看我能否解決這個古怪的難題。

Answer 1

首先，即使您在wrapper上設置了display: flex，您也無法在其子設置flex-direction: row（或列）以更改其方向。 flex-direction屬性應該設置在柔性容器上，在這種情況下爲wrapper。如果你想改變屬於一個柔性容器的柔性物品的方向，你需要用他們，使該嵌套包裝既是彎曲項目和Flex容器，在這裏與side包裝我的第一個樣品做

如果你重新排列你的標記一點點，你可以得到這個

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>

---

如果您不能或不想，要改變的標記，該ñ你需要將flexbox與絕對定位相結合。

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>