Flexbox列对齐相同宽度的项目，但没有包装器居中（仅限css）

Question

这适用于移动菜单，当然需要响应。

最长的孩子应设置所有其他孩子的宽度<​​/ p>

.index需要为背景颜色的全宽和高度。

仅限CSS ，请

我想解决这个问题，不用一个额外的包装器。

我的代码：

＆＃13;

＆＃13;

.index {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* main-axis vertical */
  justify-content: center; /* main-axis alignment */
  align-items: center; /* neither center nor stretch produce desired result */
}
.index a {
  /* nothing important here */
}

＆＃13;

<div class="index">
  <a href="">Some item</a>
  <a href="">Some other item</a>
  <a href="">This one long item</a>
  <a href="">Overview</a>
  <a href="">Contact</a>
</div>

＆＃13;

＆＃13;

＆＃13;

到目前为止我尝试了什么：

• 父级（.index）或子级（a）上的填充百分比从未使整个软件包完全居中
• 玩物品的最大宽度，但......

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

在过去的几个月中，我发现有很多关于本机Flexbox行为的事情，我很想知道并希望它能够处理这个用例。

Answer 1

为什么不删除flex选项：

＆＃13;

＆＃13;

body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
}
.index {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
}
.index > a {
  display: block;
}
.index:after {
  left:50%; 
  top:50%;
  content: '';
  display: block;
  position: fixed;
  width:100vw;
  height:100vh;
  transform: translate(-50%, -50%);
  z-index: -1;
  background: #525252;
}

＆＃13;

<div class="index">
  <a href="">Some item</a>
  <a href="">Some other item</a>
  <a href="">This one long item</a>
  <a href="">Overview</a>
  <a href="">Contact</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试下面的html或css代码：

.index {
    background-color: #525252;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;

    display: flex; flex-direction: column; // main-axis vertical 
    justify-content: center; // main-axis alignment
    align-items: center; // neither center nor stretch produce desired result

    a {
        ... // nothing importnat here 
    }
}
.index ul {
  background-color: #5c7343;
  color: #b0c696;
  float: none;
  list-style-type: square;
  margin: auto;
  padding: 0 5px 0 15px;
}
.index ul li {
  padding: 3px 0;
}
.index ul li a {
  color: #b0c696;
  text-decoration: none;
  width: 100%;
}

<div class="index">
  <ul>
    <li><a href="">Some item</a></li>
    <li><a href="">Some other item</a></li>
    <li><a href="">This one long item</a></li>
    <li><a href="">Overview</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</div>