Html 当我将浏览器窗口调整为较小尺寸时，为什么导航栏（flex box）没有折叠？

我正在修补FlexBox来设计我的网站，我正在尝试应用这些技术来制作一个响应迅速、可折叠的导航栏（最适合移动用户）。我怎样才能做到这一点？显然，.nbar类中的flex命令不起作用

*{
保证金：0；
字体系列：“Roboto”，无衬线；
}
.包装纸{
宽度：100%；
最小宽度：960像素；
保证金：0自动；
/*显示器：flex；
对齐项目：柔性端；
这只是为了更好地定位夜视按钮
*/
}
.家长{
显示器：flex；
柔性包装：包装；
/*底部的这两个是可选的
将它们放在页面中央
最大宽度：960像素；
保证金：0自动*/
最大宽度：960像素；
保证金：自动；
}
/*我们错过了。一个选择器*/
.一{
柔性生长：1；
}
.头衔{
文本对齐：居中；
位置：相对位置；
字体大小：50px；
顶部：20px；
}
.标题{
高度：100px；
宽度：100%；
顺序：0；
边框底部：1px实心rgb（0,0,0）；
}
.导航{
宽度：100%；
/*最小宽度：900px*/
高度：40px；
边框底部：1px实心rgb（0,0,0）；
顺序：1；
}
.横幅{
宽度：100%；
最小宽度：960像素；
高度：500px；
颜色：白色；
背景色：rgb（0,0,0）；
顺序：3；
}
boxOne先生{
宽度：45%；
最小宽度：200px；
高度：300px；
右边框：1px实心rgb（0,0,0）；
顺序：4；
填充物：5px；
左侧填充：10px；
右边填充：10px；
填充顶部：10px；
左边框：1px实心rgb（120120）；
文本对齐：对齐；
}
B.第二箱{
宽度：45%；
最小宽度：200px；
高度：300px；
顺序：4；
填充物：5px；
左侧填充：10px；
右边填充：10px；
填充顶部：10px；
右边框：1px实心rgb（120120）；
}
.页脚{
宽度：100%；
高度：100px；
边框顶部：1px实心rgb（0,0,0）；
边框底部：1px实心rgb（0,0,0）；
右边框：1px实心rgb（120120）；
左边框：1px实心rgb（120120）；
顺序：5；
}
恩巴尔先生{
显示器：flex；
柔性包装：包装；
对齐项目：拉伸；
柔性流动：包裹；
}
.二{
flex-grow:0；
}
.家{
顺序：1；
}
.服务{
顺序：2；
}
.推荐书{
顺序：3；
}
.投资组合{
顺序：4；
}
.联系方式{
顺序：5；
}
李{
显示：内联flex；
填充：10px 40px 10px 60px；
字体大小：15px；
}
a:链接{
文字装饰：无；
颜色：黑色；
}
a:参观了{
文字装饰：无；
颜色：黑色；
}
a:悬停{
文字装饰：下划线；
}
.光盘{
左侧填充：5px；
垫面：5px；
字体大小：10px；
颜色：rgb（150150）；
}
.人{
溢出：隐藏；
高度：500px；
宽度：960px；
}
/*.弹出窗口{
背景色：白色；
高度：20px；
宽度：90px；
边框：1px实心rgb（255,0,0）；
位置：固定；
底部：0；
}*/

多克曼





服务


推荐书


文件夹


接触


我们是谁。。。


填料
第二箱

填料

看起来像是从

.wrapper

中删除

最小宽度

，从

中删除
最小高度
。导航条似乎可以解决问题


*{
保证金：0；
字体系列：“Roboto”，无衬线；
}
.包装纸{
宽度：100%；
保证金：0自动；
/*显示器：flex；
对齐项目：柔性端；
这只是为了更好地定位夜视按钮
*/
}
.家长{
显示器：flex；
柔性包装：包装；
/*底部的这两个是可选的
将它们放在页面中央
最大宽度：960像素；
保证金：0自动*/
保证金：自动；
}
/*我们错过了。一个选择器*/
.一{
柔性生长：1；
}
.头衔{
文本对齐：居中；
位置：相对位置；
字体大小：50px；
顶部：20px；
}
.标题{
高度：100px；
宽度：100%；
顺序：0；
边框底部：1px实心rgb（0,0,0）；
}
.导航{
宽度：100%；
/*最小宽度：900px*/
边框底部：1px实心rgb（0,0,0）；
顺序：1；
}
.横幅{
宽度：100%；
最小宽度：960像素；
高度：500px；
颜色：白色；
背景色：rgb（0,0,0）；
顺序：3；
}
boxOne先生{
宽度：45%；
最小宽度：200px；
高度：300px；
右边框：1px实心rgb（0,0,0）；
顺序：4；
填充物：5px；
左侧填充：10px；
右边填充：10px；
填充顶部：10px；
左边框：1px实心rgb（120120）；
文本对齐：对齐；
}
B.第二箱{
宽度：45%；
最小宽度：200px；
高度：300px；
顺序：4；
填充物：5px；
左侧填充：10px；
右边填充：10px；
填充顶部：10px；
右边框：1px实心rgb（120120）；
}
.页脚{
宽度：100%；
高度：100px；
边框顶部：1px实心rgb（0,0,0）；
边框底部：1px实心rgb（0,0,0）；
右边框：1px实心rgb（120120）；
左边框：1px实心rgb（120120）；
顺序：5；
}
恩巴尔先生{
显示器：flex；
柔性包装：包装；
对齐项目：拉伸；
柔性流动：包裹；
}
.二{
flex-grow:0；
}
.家{
顺序：1；
}
.服务{
顺序：2；
}
.推荐书{
顺序：3；
}
.投资组合{
顺序：4；
}
.联系方式{
顺序：5；
}
李{
显示：内联flex；
填充：10px 40px 10px 60px；
字体大小：15px；
}
a:链接{
文字装饰：无；
颜色：黑色；
}
a:参观了{
文字装饰：无；
颜色：黑色；
}
a:悬停{
文字装饰：下划线；
}
.光盘{
左侧填充：5px；
垫面：5px；
字体大小：10px；
颜色：rgb（150150）；
}
.人{
溢出：隐藏；
高度：500px；
宽度：960px；
}
/*.弹出窗口{
背景色：白色；
高度：20px；
宽度：90px；
边框：1px实心rgb（255,0,0）；
<ul class='nbar'>
  <li>menu1</li>
  <li>menu2</li>
</ul>

<div class='nbar'>
  <div>menu1</div>
  <div>menu2</div>
</div>

display:-webkit-flex;
-webkit-flex-wrap: wrap;