flex 固定底部

在使用 Flex 布局时，要想让某个元素固定在底部，可以使用以下步骤：

1. 父元素设置为 `display: flex`，并且设置 `flex-direction: column`，这样子元素就会按照列的方向排列。
2. 给子元素设置 `margin-top: auto`，这样子元素就会自动向上移动，直到底部与父元素底部对齐。
3. 如果还需要让子元素水平居中，可以设置 `align-items: center`。

示例代码如下：

<div class="parent">
  <div class="child">这是一个固定在底部的元素</div>
</div>

.parent {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 父元素设置一个高度 */
}

.child {
  margin-top: auto;
  align-self: center; /* 水平居中 */
}

相关问题

flex布局中间底部

这是一个关于使用Flex实现圣杯布局的问题。

圣杯布局的要求是：全局纵向分成三部分：头部、尾部高度固定，中间自动；宽度都为100%；中间被拆分为三栏：左右宽度固定，中间自动。

中间自动会被拆分为三栏，左右宽度固定，中间自适应，宽度都为100%。在中间被拆分为三栏的情况下，中间被拆分为三栏：左右宽度固定，中间自动，高度都为100%。

css flex盒子在底部，内容增加时向上增加

您好，要实现这个效果，可以通过设置 `flex-direction: column-reverse;` 实现。这样 flex 盒子中的元素就会按照从下到上的顺序排列。当内容增加时，新的元素就会向上增加。同时，可以设置 `justify-content: flex-end;` 将元素对齐到底部。

以下是示例代码：

.container {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  height: 200px;
}

注意，为了能够让元素向上增加，需要将 flex 容器的高度设置为一个固定的值，否则容器会随着内容的增加而自动扩展高度。