在CSS Flexbox中将元素或内容置于底部的多种方法本教程通过实例展示了在CSS Flexbox中将元素或内容置于底

本教程通过实例展示了在CSS Flexbox中将元素或内容置于底部的多种方法。

让我们在html中创建一个带有子项的flexbox

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
  <body>
    <div class="flex-container">
    <div>heading 1</div>
    <div>heading 2</div>
    <div>heading 3</div>
      <button class="button">Button</button>
    </div>
</body>
</html>

这是一个带有display:flex的flex容器

.flex-container{
  display:flex;
  border:1px solid black;
  height:150px;
  width: 150px;
  flex-direction: column;
}

如下图所示，在浏览器上渲染该柔性容器

在CSS Flexbox中，我们有多种方法可以将元素调整到底部。

flex-grow使元素在flexbox容器中占据可用空间。

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
  <body>
    <div class="flex-container">
    <div>heading 1</div>
    <div>heading 2</div>
    <div>heading 3</div>
      <button class="button">Button</button>
    </div>
</body>
</html>

下面是一个带有display:flex和flex-group的flex容器，该容器的底层元素与子元素对齐。

.flex-container{
  display:flex;
  border:1px solid black;
  height:150px;
  width: 150px;
  flex-direction: column;
}
.button{
   display: flex;
    flex-grow: 1;
}

该按钮被排列在底部。

使用自动边距使底部元素成为子元素。

添加带有flex:1的容器和带有margin-top:auto或margin-top: auto的子元素。

margin top或bottom auto使得元素被推到底部。

.flex-container{
  display:flex;
  border:1px solid black;
  height:150px;
  width: 150px;
  flex-direction: column;
}
.button{
margin-top: auto;
}