如何使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全宽

回答

相关问题