Html 使用flexbox水平对齐容器底部的内容

我正在尝试使我的.bottom div在卡的底部水平对齐。所以我想在“粉丝”的基础上增加8万，在“喜欢”的基础上增加8万3千，等等。但我希望这些群体彼此相邻。以下是我目前掌握的代码：

.container{
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
职位：亲属；
宽度：50%；
高度：400px；
边框：1px纯黑；
边界半径：10%；
}
.卡片顶部{
位置：相对位置；
背景图片：url（bg pattern card.svg）；
背景尺寸：封面；
宽度：100%；
身高：30%；
边框：黑色实心1px；
对齐项目：居中；
}
维克托先生{
边缘顶部：50px；
边界半径：50%；
}
.中心{
利润上限：35px；
}
.底部{
显示器：flex；
弯曲方向：行；
位置：相对位置；
底部：0；
证明内容：之间的空间；
边框：1px纯黑；
}

维克多·克雷斯特
26

伦敦



80K

追随者


803K

喜欢


1.4K

照片

最简单的方法是使用带有display:flex的外部容器来显示3个内部容器

每个内部容器在字符串上方显示数字

CSS

.bottom{
显示器：flex；
位置：相对位置；
底部：0；
证明内容：周围的空间；
边框：1px纯黑；
}

HTML

80K
追随者

803K
喜欢

1.4K
照片

您可以利用并制作

.bottom

一个flex容器来将项目放置在一行中。接下来，使用

justify content

定义弹性项应如何沿主轴分布（x方向为行格式）。一个选项是在定义父容器的显式宽度时使用

均匀对齐内容：空格

通过将父div

.container

设置为列格式的flexbox，您走上了正确的道路，最后需要指定

justify content:space between

来定义应在flex项之间和周围分布的空间量

使用

间隔

将占用项目布置后的所有剩余空间，并在项目之间平均分配，以便每个项目之间的空间相等

基本上，flexbox列布局中的“

对齐内容”

指的是主轴（y方向）以及项目应如何沿该轴对齐

.container{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
文本对齐：居中；
位置：相对位置；
最大宽度：300px；
最小高度：400px；
边框：2件纯黑；
边界半径：10%；
}
.卡片顶部{
位置：相对位置；
背景图片：url（bg pattern card.svg）；
背景尺寸：封面；
宽度：100%；
身高：30%；
边框底部：黑色实心2px；
对齐项目：居中；
}
维克托先生{
/*边缘顶部：50px*/
边界半径：50%；
}
.中心{
利润上限：35px；
}
.底部{
位置：相对位置；
显示器：flex；
对正内容：空间均匀；
对齐项目：居中；
底部：0；
边框顶部：2件纯黑；
}
.底部p{
颜色：#000；
字号：700；
}
.底部p>span{
颜色：#222；
字体大小：.8rem；
}

维克多·克雷斯特
26

伦敦



80K

追随者


803K

喜欢


1.4K

照片

完成这类事情的方法有很多种。这是一种在卡容器上使用

display:flex

的方法，将

flex direction

设置为

column

，这意味着我们的

justify

轴现在是垂直的。在该集合中，

justify content:space between

表示第一项始终位于顶部，最后一项始终位于底部，任何内容都将占据它们之间的空间（居中）：

.card{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
宽度：300px；
最小高度：300px；
边框：2件纯黑；
边界半径：1米；
溢出：隐藏；
}
.card>p{
填充：0.1em；
}
.卡头{
背景：#eee；
填充：1em；
文本对齐：居中；
底部边框：2件纯黑；
}
.统计数据{
显示器：flex；
对正内容：空间均匀；
文本对齐：居中；
边框顶部：2件纯黑；
填充：1em；
}
统计局{
字号：700；
字体大小：较大；
边缘底部：0.25em；
}

你好，世界。
这里还有一些其他内容

80K
追随者
803K
喜欢
1.4K
照片