display flex 底部对齐

`display: flex;` 是 CSS 中用于创建弹性布局的一种属性，它可以让元素在一行或多行内灵活地调整其大小和位置。如果你想要让 Flex 容器内的项目在底部对齐，你可以使用 `align-items: flex-end;` 或者 `align-content: flex-end;`。

- 如果你的容器是单行布局，使用 `align-items: flex-end;` 将会使得内容的顶部对齐到容器的顶部，而内容的底部则会贴紧容器的底部。
- 如果容器有多行，并且你想让每行的内容都底部对齐，那么应该在 `.parent { align-content: flex-end; }` 的选择器下设置，这里的 `.parent` 是包含 flex 子项目的容器。

这是一个例子：

.container {
  display: flex;
  /* 高度设置为有内容能撑开的高度 */
  height: 400px;
  align-items: flex-end; /* 单行底部对齐 */
  /* 或者 */
  align-content: flex-end; /* 多行底部对齐 */
}

相关问题

display flex 垂直对齐

display:flex是CSS中的一个属性，用于创建弹性布局。它可以控制元素的排列方式和对齐方式。在垂直对齐方面，可以通过以下几种方式实现：

1. 使用align-items属性：align-items属性用于设置弹性容器中项目的垂直对齐方式。可以设置的值包括：
- flex-start：项目在容器的顶部对齐。
- flex-end：项目在容器的底部对齐。
- center：项目在容器的垂直中心对齐。
- baseline：项目在容器的基线对齐。
- stretch：项目被拉伸以适应容器。

例如：

   .container {
     display: flex;
     align-items: center; /* 垂直居中对齐 */
   }

2. 使用justify-content属性：justify-content属性用于设置弹性容器中项目的水平对齐方式，但也可以用于垂直对齐。可以设置的值包括：
- flex-start：项目在容器的顶部对齐。
- flex-end：项目在容器的底部对齐。
- center：项目在容器的垂直中心对齐。
- space-between：项目平均分布在容器内，首个项目在顶部，最后一个项目在底部。
- space-around：项目平均分布在容器内，项目之间有空间，容器两端也有空间。

例如：

   .container {
     display: flex;
     justify-content: center; /* 垂直居中对齐 */
   }

3. 使用margin属性：通过设置元素的margin属性，可以实现垂直居中对齐。将上下margin设置为auto，可以使元素在垂直方向上居中对齐。

例如：

   .element {
     margin-top: auto;
     margin-bottom: auto;
   }

display:flex下对齐

display:flex下对齐的属性是align-items和justify-content。align-items属性用于垂直对齐项目，可以设置以下几个值：flex-start（默认值，顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）、stretch（拉伸对齐）。justify-content属性用于水平对齐项目，可以设置以下几个值：flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）、space-around（每个项目两侧的间隔相等，项目之间的间隔是项目间隔的两倍）。这两个属性可以同时使用，以实现项目在容器中的对齐。