固定div的兩列flexbox佈局

我正在嘗試學習flexbox，並試圖實現以下佈局。固定div的兩列flexbox佈局

+----------+----------+ 
|   |nav  | 
| header +----------+ 
|   |section | 
+----------+----------+

HTML結構

<header></header> 
<nav></nav> 
<section></section>

佈局要求

每個元件的寬度被精確地50vw（或50％）
部首內容始終爲中心並固定。佔用100vh。
導航內容是固定的
段內容是可滾動的，溢出是隱藏的。

這是甚至可能與flexbox？

在移動設備上，我希望將所有三個列放在一列中，但這一部分很簡單。

來源

2017-04-25 Leo Net

如果你可以在容器中設置一個固定的高度，那麼你的佈局，可以使用Flexbox的'欄wrap'。如果你不能設置高度，那麼你需要將'nav'和'section'元素封裝在一個嵌套容器中。如果你不能這樣做，那麼不，這是不可能的，用flexbox ... –

你能夠使用CSS網格佈局嗎？ –

我想可以將容器設置爲100vh。如果可能的話，我不想將nav和section包裝到嵌套容器中，所以我不會使移動樣式複雜化。 CSS網格佈局不起作用，我需要一些向後兼容性。 –

body { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    height: 100vh; /* key rule; this tells flex items where to wrap 
 
        to form second column */ 
 
} 
 

 
header { 
 
    flex: 0 0 100%; 
 
    width: 50%; 
 

 
    /* center content */ 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
nav, section { 
 
    flex: 0 0 50%; 
 
    width: 50%; 
 
} 
 

 
/* non-essential decorative styles */ 
 
*  { box-sizing: border-box; margin: 0; } 
 
header { background-color: aqua; } 
 
nav  { background-color: tomato; } 
 
section { background-color: lightgreen; }

<header>header</header> 
 
<nav>nav</nav> 
 
<section>section</section>

有關詳細說明和替代方法，請參閱我的答案在這裏：

Is it possible for flex items to align tightly to the items above them?

來源

2017-04-25 02:46:01

謝謝，這幾乎解決了我的問題:-)我有兩個問題，我沒有看到一個很好的解決方案。我正在瀏覽一些flexbox教程，也許我會看到解決方案。我遇到的問題是我希望教堂中殿有一個固定的高度，對不起，我沒有在我的問題中說清楚。此外，當我在部分div中溢出內容時，整個div就會消失。 –

我認爲可以修復溢出問題。但總的來說，flexbox並非設計用來構建完美的網格，因爲flex項目可以跨越列*或*行，但不能同時包含兩者。這就是爲什麼CSS網格是完美的，但我知道你不能使用它。查看我在答案結尾處發佈的替代方案的鏈接。 –

謝謝Michael_B！ –

，如果你想使用Flexbox，就可以用做逃脫雙容器佈局。

HTML

<div class="flex-container"> 
<header>Something</header> 
<div class="flex-child-container"> 
<nav>nav</nav> 
<section>section</section> 
</div> 
</div>

CSS

div { 
display: flex; 
width: 100%; 
height: 100% 
} 

.flex-child-container { 
flex-direction: column; 
}

來源

2017-04-25 03:11:16

固定div的兩列flexbox佈局

回答

相關問題