Html Flexbox列对齐项目相同宽度但居中，不带包装（仅css）

这是一个移动菜单，当然需要响应性

最长的子项应设置所有其他子项的宽度

.index

必须为全宽和全高，并带有背景色

仅限CSS，请

我想在没有额外包装的情况下解决这个问题。

---

我的代码：

.index{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：立柱；/*主轴垂直*/
对齐内容：居中；/*主轴对齐*/
对齐项目：居中；/*居中或拉伸都不会产生所需的结果*/
}
.索引a{
/*这里没什么重要的*/
}

---

为什么不删除flex选项：

body，
html{
身高：100%；
填充：0；
保证金：0；
}
.索引{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
显示：内联块；
}
.index>a{
显示：块；
}
.索引：之后{
左：50%；
最高：50%；
内容：''；
显示：块；
位置：固定；
宽度：100vw；
高度：100vh；
转换：翻译（-50%，-50%）；
z指数：-1；
背景：#525252；
}

---

尝试下面的html或css代码：

.index{
背景色：#525252；
位置：固定；顶部：0；左侧：0；
宽度：100%；高度：100%；
显示：flex；flex方向：column；//主轴垂直
对齐内容：居中；//主轴对齐
对齐项目：居中；//居中或拉伸都不会产生所需的结果
a{
…//这里什么都不重要
}
}
.索引ul{
背景色：#5c7343；
颜色：#b0c696；
浮动：无；
列表样式类型：方形；
保证金：自动；
填充：0 5px 0 15px；
}
.索引ul li{
填充：3px0；
}
.索引ul li a{
颜色：#b0c696；
文字装饰：无；
宽度：100%；
}

您是否尝试过使用

padding

属性？正如我所指出的，我尝试过在父

索引

和子

a

上填充，但从未在多个视口宽度上实现整个框的完全居中对齐。但我可能错了。基本上，没有包装的flexbox是不可能做到的。@Paulie_D，你伤了我的心，我需要一个全屏背景。很抱歉没有提及。嗯，那么我认为如果没有额外的包装，这是不可能的太糟糕了。。。这可能很容易<代码>对齐项目：匹配动臂！我发现了一个使用伪元素的黑客！从背景图像中检查它？虽然您的代码片段不符合我的要求，但可以使用

ul

。但这是我试图避免的包装。