如何使flexbox div全宽

Question

我想做的是使用 flexbox 将 'aside' 标签中的每个 'divs' 设为全角。

侧边栏的宽度为 25%，但 div 未填充左侧和右侧的 space。我可以在每一边添加填充，但它有点混乱并且破坏了 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

Answer 1

如果删除 "align-items:center;"，它将强制 div 占据列中的整个 space。

如果您决定要 space 介于两者之间或其他任何东西，或者您需要让它们对齐，可以使用 justify-content:center; 仍然会让它们占据整个 div .

如何使flexbox div全宽

How to make flexbox divs full width

html

css

width

flexbox