我希望在容器中垂直放置一组按钮(紧随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>
谢谢。
答案 0 :(得分:1)
在您的.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>