flex div 居下

要将一个 Flex容器 (flex container) 内的 div 元素居下，可以使用以下方法：

1. 首先，将 Flex容器的 display 属性设置为 flex，这样它的子元素就能按照 flex 布局进行排列。

2. 接下来，使用 justify-content 属性来对齐 flex 子元素的水平方向。在这种情况下，我们可以将 justify-content 设置为 flex-end，使子元素在容器内水平靠右对齐。

3. 然后，使用 align-items 属性来对齐 flex 子元素的垂直方向。在这种情况下，我们可以将 align-items 设置为 flex-end，使子元素在容器内垂直靠底对齐。

下面是一段示例代码实现以上效果：

<style>
  .flex-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    height: 300px;  /* 可以根据实际需求设置容器的高度 */
    border: 1px solid black;  /* 仅为了可视化展示容器的边界，可忽略 */
  }
  .flex-item {
    background-color: yellow;  /* 仅为了可视化展示子元素，可忽略 */
    padding: 10px;  /* 仅为了可视化展示子元素，可忽略 */
    margin: 10px;  /* 仅为了可视化展示子元素，可忽略 */
  }
</style>

<div class="flex-container">
  <div class="flex-item">子元素1</div>
  <div class="flex-item">子元素2</div>
  <div class="flex-item">子元素3</div>
</div>

可以根据实际需求进行调整，容器的高度和子元素的样式都可以自定义。以上代码会在一个高度为300px的容器内，使子元素在垂直方向上靠底对齐。