Html 当页面太小时，我正在创建的Flexbox网格正在断开

我正在尝试创建自己的网格系统

这样做只是为了了解flex的工作原理

我已经创建了网格，一切正常，除了标题。当页面太小时，导航将位于徽标下方

如果有人知道为什么，我会很高兴的

@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400300600700）；
*,
*：之前，
*：之后{
框大小：边框框；
}
html正文{
保证金：0；
填充：0；
字体系列：“开放式Sans”，无衬线；
}
h1，
h2，
h3，
h4，
h5，
P
A.
锂，
保险商实验室{
保证金：0；
填充：0；
}
/*将网站内容集中在950px的宽度内*/
.集装箱{
宽度：80%；
保证金：0自动；
}
/*标题样式*/
标题{
背景：#66b3ff；
/*填充：10px*/
}
/*标志*/
#标志h1{
字体大小：300；
边缘顶部：30px；
}
#标志h1跨度{
字号：600；
}
/*标志末尾*/
/*导航*/
导航ul{
保证金：0；
填充：0；
显示器：flex；
边缘顶部：50px；
}
李{
弹性：1；
列表样式：无；
}
a{
文字装饰：无；
}
/*标题结尾样式*/
/*纵队*/
.col1，
.col2，
.col3，
.col4，
.col5，
.col6，
.col7，
.col8，
.col9，
.col10，
.col11，
.col12{
保证金：0 5px 0 5px；
}
.行{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
}
.col1{
宽度：8%；
}
.col2{
宽度：16%；
}
.col3{
宽度：25%；
}
.col4{
宽度：33%；
}
.col5{
宽度：41%；
}
.col6{
宽度：50%；
}
.col7{
宽度：58%；
}
.col8{
宽度：66%；
}
.col9{
宽度：75%；
}
.col10{
宽度：83%；
}
.col11{
宽度：91%；
}
.col12{
宽度：100%；
}

网站名称在这里
恳求签名机构










主要网站内容在这里
正宗的特鲁法特在上面放了一只鸟，玉米卷十字架。羽衣甘蓝片工艺啤酒奥斯汀，有机小批量鼠尾草鱿鱼。现成的健康哥特人放了一只鸟在上面，你的符号学衣衫褴褛别致的威廉斯堡自拍男人辫子戈达尔。DIY博客洛莫布边。
Pabst echo park玉米饼，kinfolk chicharrones thundercats农场，餐桌上的杂碎twee keffiyeh affogato irony helvetica班卓琴。自行车权利XOXO讽刺mumblecore豆腐，keffiyeh媚俗复古格子花呢精檀街艺术。淡黄色
90年代你可能还没听说过他们戈达尔，DIY keffiyeh listicle 3狼月胡子

这里是边栏
页脚内容

在较小的屏幕上，nav位于徽标下方的原因是您在弹性项目上使用了百分比宽度

在标题flex容器（

.row

）中，有两个flex项（

div.col6

和

nav.col6

）。在这两个项目上都应用了此规则：

.col6 { width: 50%; }

您的项目在所有屏幕大小上都遵守该规则。这意味着在较小的屏幕上，它们将重叠

请尝试以下方法：

.col6 { flex: 1; } 

现在，两个flex项目将平等地共享可用空间，但不会重叠

---

您应该允许此行换行并使用flex覆盖宽度值：

.row {
  display: flex;
 /* flex-direction: row; this is default */
}
header .row {
  flex-wrap: wrap;/* default is no wrap ! */
}
header nav, header #logo {
  flex:1;
}

---

请检查codepen的完整代码，因为我无法将其发送到这里嘿，伙计，真是足智多谋。去试试看。您没有设置最小宽度（这很好），导致了此问题。设置弹性基准或弹性值。这会不会使页面上的其他列都相同？我想边栏说1/3，而内容是2/3，所以我添加了百分比。我该怎么做？您可以使用

flex grow

属性在flex容器中分配可用空间。所以你可以说：

sidebar{flex-grow:33；}

和

content{flex-grow:67；}

。但这是非常普遍的指导。我的回答是针对你的主要问题：为什么会有重叠？为了回应你的评论，你可能想发布一个包含所有细节的单独问题。我已经提出了另一个MichaelFantastic帮助Michael的线索。对不起，我会投票并打勾，但从那以后就再也没有回到这里了。非常感谢你！这也是一个坏主意。我想知道使用flex来确定列的大小而不是百分比是否更好。我又做了一条线，看看有没有更好的办法