如何使flexbox div全寬

我想要做的是使'flex'中的'div'標籤中的每一個都是使用flexbox的全角。如何使flexbox div全寬

側邊欄的寬度是25％，但是div不填充左側&右側的空間。我可以添加填充到每一面，但它有點混亂，並破壞align-items: center

如果你在全屏下運行下面，你會明白我的意思。

aside { 
 
    display: flex; 
 
    height: 100vh; 
 
    width: 25%; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
aside div { 
 
    padding: 89.9px; 
 
} 
 
.test1 { 
 
    background-color: gray; 
 
} 
 
.test2 { 
 
    background-color: red; 
 
} 
 
.test3 { 
 
    background-color: blue; 
 
} 
 
.test4 { 
 
    background-color: green; 
 
} 
 
.test5 { 
 
    background-color: orange; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="css/custom.css"> 
 
</head> 
 

 
<body> 
 

 
    <aside> 
 
    <div class="test1">234324</div> 
 
    <div class="test2">232</div> 
 
    <div class="test3">3234324234</div> 
 
    <div class="test4">2344</div> 
 
    <div class="test5">234234234233245</div> 
 
    </aside> 
 

 
</body> 
 

 
</html>

我已經實現如下（見圖片），而無需使用Flexbox的，但我真的很想，使其與Flexbox的工作。

Without flexbox

來源

2016-08-21 Qasim Arif

你有沒有嘗試在''div div'選擇器的CSS中添加'width：100％;'？ – Xetnus

如果刪除"align-items:center;"這將迫使div的佔用列內的整個空間。

如果您決定要在兩者之間或任何其他地方使用空間，或者您需要讓它們對齊，則可以使用justify-content:center;，它們仍然會佔用整個div。

來源

2016-08-21 14:15:51

感謝您的回覆Will。我會比只使用填充將文本置於中心嗎？ –

你可以使用text-align：center;以文本爲中心。將其添加到柔性容器（放在一邊） –

太棒了。感謝那。 –

如何使flexbox div全寬

回答

相關問題