CSS Flex 布局：如何上下颠倒 HTML 内容盒子顺序

在 CSS 中，可以使用 'flex-direction' 属性来控制 flex 容器中项目的排列方向。默认情况下，'flex-direction' 的值为 'row'，即水平方向。

要将 HTML 中内容盒子的上下顺序进行切换，可以将 'flex-direction' 的值设置为 'column'，即垂直方向。

以下是一个示例：

HTML 代码：

<div class='flex-container'>
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

CSS 代码：

.flex-container {
  display: flex;
  flex-direction: column;
}

在上述示例中，'.flex-container' 是一个 flex 容器，'flex-direction: column;' 将项目在垂直方向上进行排列。这将使内容盒子在上下方向上进行切换顺序。