Html flex容器，如何对齐中心，但在没有边距空间时左对齐

我有一些代码是display flex，它有两列，我希望它在有不动产时居中对齐，但当浏览器收缩且没有空间时，我希望它左对齐。右侧的内容可以隐藏，但左侧的内容需要保持可见

.menuHeader{
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：绝对位置；
顶部：56px；
z指数：1000；
宽度：100%；
高度：64px；
}

xxxxxx
xxxxxx

我想出了一个答案。所以我刚刚做了一个溢出：auto-on.menuHeaderNav，这很有帮助。menuHeader2保持在视图中，而不是从左侧的视图中滚动出去

您想要这样的东西吗

当宽度小于500px时，柱将被移除

.menuHeader{
显示器：flex；
对齐项目：居中；
柔性包装：包装；
证明内容：中心；
宽度：100%；
身高：100%；
}
.menuHeader>div{
弹性：1050%；
}
@媒体屏幕和屏幕（最大宽度：500px）{
梅努海德先生{
弯曲方向：立柱；
对齐项目：左；
}
.menuHeader分区：第n个孩子（偶数）{
显示：无；
}
}

家庭1
家庭2
内容1
内容2
标题1
标题2

您是否尝试过引导网格系统？需要更好地解释所需的结果。左边是什么内容右边是什么…正确地框定你的问题。提供更好的代码片段