如何使flexbox divs全宽

Question

我想要做的是使用flexbox使'aside'标签中的每个'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一起使用。

没有flexbox

Answer 1

如果删除"align-items:center;" 它会强制div占据列内的整个空间。

如果你决定在中间或其他任何地方想要空间，或者你需要让它们对齐，可以使用justify-content:center; 这仍将让他们占据整个div。

如何使flexbox divs全宽

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-08-21 14:15:51

如何使flexbox divs全宽

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-08-21 14:15:51

解决方案1
0 已采纳 2016-08-21 14:15:51