CSS垂直按钮组-忽略对齐内容

如何解决CSS垂直按钮组-忽略对齐内容

我希望在容器中垂直放置一组按钮（紧随CSS Flex样式周围）。以下是完整的html部分，演示了我遇到的问题-无论我尝试过什么，按钮总是从容器的顶部构建（就像flex-start一样）（下面的样式“容器”只是设置了任意一个，是固定大小的容器，我希望按钮（分别比容器小，并且高度要比容器小的高度）垂直放入容器中。）

我不确定显示的目的：在类中的按钮（存在/不存在似乎没有效果。）

.container {
  border: 1px solid black;
  height: 250px;
  width: 200px;
}
.buttons {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.abutton {
  border: 1px solid red;
  color: blue;
  height: 30px;
  width: 100px;
  display: block;
}

<div class="container" >
  <div class="buttons">
    <button class = "abutton">Button 1</button>
    <button class = "abutton">Button 2</button>
    <button class = "abutton">Button 3</button>
    <button class = "abutton">Button 4</button>
  </div>
</div>

谢谢。

解决方法

在您的.buttons中添加宽度：100％和高度：100％；这样就可以填充整个容器空间：

.buttons {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-around;
  width: 100%;
}

工作示例：

.container {
  border: 1px solid black;
  height: 250px;
  width: 200px;
}
.buttons {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-around;
  width: 100%;
}
.abutton {
  border: 1px solid red;
  color: blue;
  height: 30px;
  width: 100px;
  display: block;
}

<div class="container" >
  <div class="buttons">
    <button class = "abutton">Button 1</button>
    <button class = "abutton">Button 2</button>
    <button class = "abutton">Button 3</button>
    <button class = "abutton">Button 4</button>
  </div>
</div>