固定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布局

回答

相关问题