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>