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%。

html页脚固定到底部

要将 HTML 页面的页脚固定到底部，可以使用 CSS 来实现。以下是一种实现方式：

1. HTML 结构

在 HTML 中，页脚通常是放在页面的最后面。可以使用类似以下的 HTML 代码来定义页脚：

<footer>
  <!-- 在这里添加页脚内容 -->
</footer>

2. CSS 样式

使用以下 CSS 样式可以将页脚固定到底部：

html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

footer {
  flex-shrink: 0;
}

其中，`html` 和 `body` 元素的高度都设置为 `100%`，表示让它们占据整个可视区域的高度。`body` 元素使用 `display: flex` 属性将其变为一个 Flex 容器，并且设置 `flex-direction: column`，表示子元素按垂直方向排列。`main` 元素使用 `flex: 1` 属性将其高度设置为自动扩展，以填充剩余的空间。`footer` 元素使用 `flex-shrink: 0` 属性将其固定在底部，即使内容较少也不会被压缩。

使用以上 CSS 样式，无论页面内容高度如何，页脚都会一直固定在底部。