Css 停止弯曲重叠

我使用

display:flex

，实现了以下导航：

#标题导航{显示：flex；flex-grow:1；背景：#707276；背景：rgba（112114118,0.75）；}
#标题nav.nav项{display:flex；flex-grow:1；flex-basis:0；}
#标题导航.nav链接{显示：块；颜色：#ffffff；显示：flex；flex-grow:1；对齐内容：中心；对齐项目：中心；空白：nowrap；}
#标题nav>.nav item>.nav链接{框大小：边框框；文本转换：大写；文本装饰：无；填充：15px 0；位置：相对；转换：颜色0.5s缓进-缓出；字体大小：115.385%；字体系列：VegurRegular；}
#标题nav>.nav item>.nav链接：悬停{color:#000000；}
#标题nav>.nav项>.nav链接：在{content:''之后；显示：块；位置：绝对；底部：0；左：0；右：0；高度：5px；不透明度：0；过渡：不透明度0.5s缓进缓出；背景色：#36383a；}
#标题nav>.nav item>.nav链接：悬停：在{opacity:0.8；}之后
#header nav.home{flex-grow:0；flex-basis:auto；padding:0 50px；}
#标题nav.nav-item.home>.nav链接{display:block；}
#标题nav.nav-item.home>.nav链接：在{display:none；}之后

尝试删除

空白：nowrap按原样本质上不响应


#标题导航{
显示器：flex；
柔性生长：1；
背景#707276；
背景：rgba（112114118,0.75）；
}
#标题导航。导航项目{
显示器：flex；
弹性：1；
}
#标题导航。导航链接{
颜色：#ffffff；
显示器：flex；
柔性生长：1；
文本对齐：居中；
证明内容：中心；
对齐项目：居中；
对齐内容：居中对齐；
}
#标题导航>导航项目>导航链接{
框大小：边框框；
文本转换：大写；
文字装饰：无；
填充：15px0；
位置：相对位置；
过渡：颜色0.5s缓进缓出；
字体大小：115.385%；
字体系列：VegurRegular；
}
#标题导航>.nav项>.nav链接：悬停{
颜色：#000000；
}
#标题导航>.nav项>.nav链接：之后{
内容：''；
显示：块；
位置：绝对位置；
底部：0；
左：0；
右：0；
高度：5px；
不透明度：0；
过渡：不透明度0.5s缓进缓出；
背景色：#36383a；
}
#标题导航>.nav项>.nav链接：悬停：之后{
不透明度：0.8；
}
#标题导航主页{
flex-grow:0；
弹性基础：自动；
填充：0 50px；
}
#标题nav.nav-item.home>.nav链接{
显示：块；
}
#标题nav.nav-item.home>.nav链接：之后{
显示：无；
}











您可以使用
flex wrap:wrap
@NenadVracar这会导致链接被包装，我不想这样做幸运的是，我不想让文本被包装-我只是在寻找一种方法，将屏幕缩小到列表的大小，所有文本都放在一行上（就像使用display:table时那样）-不幸的是，我不能走表格路线，因为我使用flex将我的链接扩展到徽标的大小。我将使用媒体查询来更改为移动汉堡菜单，但我只是想知道上述操作是否可行，或者flex在我的情况下是否总是重叠如果你告诉文本不要包装，那么你将不得不预期溢出/重叠<代码>空白：nowrap

本质上没有响应。不一定：您看到它只是将文本推离屏幕，而不是重叠。我认为flex没有任何属性允许它在获取内容宽度时做类似的事情，而不仅仅是调整到我所不知道的计算宽度。要么你想让它有响应性，要么你不想……我不认为屏幕上的文字是有响应性的。公平地说，有响应性的东西是一条红鲱鱼，因为当它变小的时候，你会得到汉堡菜单。我只是有一个搜索框打开，导致文本顶部被挤压和重叠。我得想另一种打开文本框的方法