CSS flexBox不会定位到底部[重复]

Posted 2023-03-06

【中文标题】CSS flexBox不会定位到底部[重复]

【英文标题】：CSS flexBox won't position to bottom [duplicate]

【发布时间】：2021-06-08 01:09:03

【问题描述】：

嘿，伙计们，我一辈子都无法使用 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>
  );

【参考方案1】：

尝试使用："auto" margins

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>

【讨论】：

我实施了更改，但它似乎仍然表现得很奇怪。这确实有点帮助，将标题更改为 margin-auto 似乎有助于整体布局。

您是否还向容器中添加了“display: flex”和“flex-direction : column”？