Flexbox的柱对齐项相同的宽度但不居中包装物（CSS-只）

Question

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

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

.index需求是全宽度和高度与背景色。

只有 CSS，请

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

---

我的代码：

.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 */ 
 
}

<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>

---

我试过到目前为止：

• 满额填充在任父（.index）或儿童（a）从来没有全包为中心的完美
• 与物品最大宽度玩耍了，但...

我想解决这个问题没有一个额外的包装。

在过去的几个月中，我发现有很多关于原生Flexbox行为的东西，我想知道并希望它能处理这个用例。

Answer 1

为什么不只是删除柔性选项：

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; 
 
}

<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>

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>