Html 如何使div在容器div的底部对齐

以这把小提琴为例：

我希望我的按钮在他们的div的底部

我试着在他们的容器div上使用

align-self:flex-end

，但结果是该div的内容在末尾对齐，而不是div本身

.container{
宽度：600px；
显示器：flex；
柔性流：行；
边框：2倍纯红；
}
.box1，
.box2，
.box3{
宽度：100%；
边框：1px纯蓝色；
显示器：flex；
柔性流动：柱；
尺寸：100px；
}
.内容{
文本对齐：居中；
}
.按钮{
显示器：flex；
柔性流动：柱；
}

嘿

一个
二二
呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵

一个
二二
嘿

一个
二二

---

只需添加

margintop:auto
将
边距
属性与flexbox一起使用


.container{
宽度：600px；
显示器：flex；
柔性流：行；
边框：2倍纯红；
}
.box1，
.box2，
.box3{
宽度：100%；
边框：1px纯蓝色；
显示器：flex；
柔性流动：柱；
尺寸：100px；
}
.内容{
文本对齐：居中；
}
.按钮{
显示器：flex；
柔性流动：柱；
页边顶部：自动；
}

嘿

一个
二二
呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵

一个
二二
嘿

一个
二二
尝试使用绝对定位，请参见下面的代码：

.buttons{
    position: absolute;
    bottom: 0px;
}

.box1,
.box2,
.box3 {
    width: 100%;
    border: 1px solid blue;
    display: flex;
    flex-flow: column;
    size: 100px;
    position: relative;
}

flex-grow:1
on
。内容
足以实现此功能：

.content {
  text-align:center;
  flex-grow: 1;
}

它将占用
.box
列中的所有可用空间。
（谢谢@LGSon）
bsd

看看


您需要
position:relative
divs，然后
position:absolute；底部：0；宽度：100%
按钮

但是，如果您需要内容不被按钮隐藏，那么您需要一个容器来容纳内容，其中包含
溢出：auto
和固定宽度之类的内容

有点像这样：
使用内容填充和按钮绝对位置的解决方案：


.container{
宽度：600px；
显示器：flex；
柔性流：行；
边框：2倍纯红；
}
.box1、.box2、.box3{
宽度：100%；
边框：1px纯蓝色；
尺寸：100px；
位置：相对位置；
}
.内容{
文本对齐：居中；
身高：100%；
填充底部：50px；
}
.按钮{
位置：绝对位置；
底部：0；
宽度：100%；
高度：50px；
显示器：flex；
柔性流动：柱；
}

嘿

一个
二二
呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵

一个
二二
嘿

一个
二二
+1为最干净的解决方案，@FelipeAls为
内容提供背景色，突然间这不再那么好了…检查我在问题上的评论您只需将
flex grow:1
添加到
内容
。。。如果你想给
内容
一个背景色，你必须这样做。。。与
页边距顶部一样：auto
看起来不太好。。。
.content {
  text-align:center;
  flex-grow: 1;
}