Css 我可以避免这个flexbox包装吗？

我不确定是否需要一个包装来限定容器的最大宽度

标题的宽度为100%，而
.wrapper的最大宽度为1000px

有没有办法避免使用
.wrapper
div


body{margin:0；}
标题{
保证金：0；
填充：0；
背景色：暗色；
}
.标题包装{
保证金：自动；
最大宽度：500px；
填充：10px0；
}
#标志、标语、菜单{
保证金：自动；
填充物：5px；
}
#标志{
弹性：2；
背景颜色：深红色；
}
#标语{
弹性：5；
背景颜色：鲑鱼；
}
#菜单{
弹性：3；
背景色：印度红；
}
@介质（最小宽度：768px）{
.标题包装{
显示器：flex；
}
}

标志
标语
菜单
这取决于您的具体需求，在设计页面时，没有关于您的确切html结构的快速规则

如果希望背景颜色扩展整个
100%宽度
，但希望内容具有隐藏的左/右屏障，则可能需要一个包装器来强制执行该屏障规则。否则，红色背景将仅与
1000px
规则（或您设置的居中边界）一样宽

如果您不需要屏障，并且希望内容/导航项跨越整个宽度，那么您就不需要包装器

同样，这取决于组件的总体设计，设置所有div max width，它等于1000px，根据mediaqueries，您的包装将始终是500px，因此每个元素的宽度都是静态的

您可以修改MediaQuery并删除额外的包装器和flex值

下面的代码片段的行为就像您的代码笔一样。。。使用无包装：


正文{
保证金：0；
}
标题{
保证金：0；
填充：0；
背景色：暗色；
填充：10px0；
}
#标志，
#标语，
#菜单{
填充物：5px；
}
#标志{
背景颜色：深红色；
}
#标语{
背景颜色：鲑鱼；
}
#菜单{
背景色：印度红；
}
@介质（最小宽度：768px）{
标题{
显示器：flex；
证明内容：中心；
}
#标志{
宽度：100px；
}
#标语{
宽度：250px；
}
#菜单{
宽度：150px；
}
}

标志
标语
菜单
谢谢，我想这回答了我的问题。我不希望所有div的最大宽度都为1000px，我希望此div的包装器具有该属性，但每个div的宽度都不同。我想我的问题刚刚得到@abdul Ahmad的回答，这是一个很好的解决方案，但我想我会遇到宽度较低的设备的问题。我对当前的设计状态很满意，拥有一个最大宽度的.wrapper div对我的项目来说是一个不错的解决方案。无论如何谢谢你！