时间戳

首页 > 解决方案 > CSS flexBox 不会定位到底部

html - CSS flexBox 不会定位到底部

问题描述

嘿伙计们，我这辈子都无法使用 flexBox 获得按钮以转到容器底部。我尝试了多种不同的东西，出于某种原因，它很固执。我实际上已经使用了很多 flexBox，所以我对为什么会遇到这么多麻烦感到困惑。该按钮当前位于 DivCont 的中间，背景颜色为白色。

这是我的代码，你可以在底部看到我什至尝试在第三个按钮周围添加一个 div 来测试它......请原谅 justify contentflex-end' 垃圾邮件

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>
  );
}

标签： htmlcssflexbox

解决方案

尝试使用："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>

推荐阅读