Question

我要做的就是让每个人都做出这样的事情。在＆＃39;旁边＆＃39;使用flexbox标记为全角。

侧边栏的宽度为25％但是div不会填充左侧和左侧的空间。右边。我可以为每一方添加填充但是它有点乱，并且会破坏align-items: center

如果你全屏运行以下内容，你就会明白我的意思。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

我在不使用flexbox的情况下实现了它（见图），但我真的很想让它与flexbox一起使用。

Without flexbox

Answer 1

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

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

如何使flexbox divs全宽

1 个答案: