CSS flexBox 不会位于底部

Question

嘿，伙计们，我不能让按钮到底部的容器使用flexxbox。我尝试了很多不同的方法，但出于某种原因，我很固执。我实际上已经使用了flexBox相当多，所以我很困惑，为什么我遇到了这么多的麻烦。按钮当前位于DivCont的中间，背景颜色为白色。

这是我的代码，你可以看到在底部，我甚至尝试在第三个按钮周围添加一个div来测试它…请原谅contentflex-end' spam

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Link } from "react-router-dom";
const useStyles = makeStyles({
divCont: {
backgroundColor: "white",
display: "flex",
width: "250px",
height: "250px",
borderRadius: "10px",
margin: "40px",
flexDirection: "column",
},
button: {
display: "flex",
justifyContent: "flex-end",
alignContent: "flex-end",
alignItems: "flex-end",
},
mainCont: {
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "flex-end",
alignContent: "flex-end",
},
h2: {
fontWeight: "normal",
display: "flex",
justifyContent: "center",
},
p: {},
buttonCont: {
display: "flex",
justifyContent: "flex-end",
alignItems: "flex-end",
alignContent: "flex-end",
},
});
export default function HomeMeunuGrid() {
const classes = useStyles();
return (
<div className={classes.mainCont}>
<div className={classes.divCont}>
{" "}
<h2 className={classes.h2}>Custom Tubmlers</h2>
<p className={classes.p}>Hello to the world</p>
<button className={classes.button}>Click me</button>
</div>
<div className={classes.divCont}>
<h2 className={classes.h2}>Affordable Prices</h2>
<p className={classes.p}> Hello to the world</p>
<button className={classes.button}>Click me</button>
</div>
<div className={classes.divCont}>
<h2 className={classes.h2}>Family Owned</h2>
<p className={classes.p}> Hello to the world</p>
<div className={classes.buttonCont}>
<button className={classes.button}>Click me</button>
</div>
</div>
</div>
);
}

Answer 1

尝试使用:"auto" margins

汽车利润

从网站:

在通过justify-content和align-self对齐之前，任何正值自由空间被分配到该维度的自动边距。

你可以这样写:

buttonCont: { margin-top: auto; }

示例如何实现:

.mainCont {
height: 400px;
border: 1px solid;
display: flex;
flex-direction: column;
}
h1, h2 {
margin: 0;
}
p {
margin-top: auto;
}

<div class="mainCont">
<h1>Test 1</h1>
<h2>Test 2</h2>
<p>Bottom</p>
</div>