如何用CSS Flexbox实现目标布局？调整代码后结果不符

我目前正在学习HTML和CSS，想要实现如下布局效果：第一列从上到下依次是3、2、1，第二列从上到下依次是5、4，整体容器宽240px、高200px，每个子元素宽80px、高50px。

我的HTML代码如下：

<body>
  <div class="container">
    <div id="one"> 1</div>
    <div id="two"> 2</div>
    <div id="three">3</div>
    <div id="four"> 4</div>
    <div id="five"> 5</div>
  </div>
</body>

初始CSS代码：

.container {
  width: 240px;
  height: 200px;
  border: 1px solid gray;
}
.container > div {
  width: 80px;
  height: 50px;
  border: 1px solid red;
}

我尝试用Flexbox实现，但调整后的CSS得到的结果不符合预期，调整后的代码如下：

.container {
  width: 240px;
  height: 200px;
  border: 1px solid gray;
  display: inline-flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;
  align-content: flex-start;
}
.container > div {
  width: 80px;
  height: 50px;
  border: 1px solid red;
}

请求指导如何修改代码以实现目标布局。

要实现目标布局，需修正HTML语法错误，并调整Flex容器的核心属性：

1. 修复HTML语法问题
   代码中部分id使用了中文引号（“one”），需改为英文双引号（"one"），否则浏览器无法正确识别选择器。

2. 调整Flex容器属性

   • 替换display: inline-flex为display: flex：inline-flex会让容器宽度随内容收缩，无法保持固定的240px宽度；
   • 替换flex-direction: column-reverse为flex-direction: column：保持元素原始顺序沿列方向排列；
   • 添加justify-content: flex-end：让元素沿列方向从容器底部开始向上排列，刚好匹配目标布局中1、2、3及4、5的位置顺序。

最终修正后的CSS代码：

.container {
  width: 240px;
  height: 200px;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
}
.container > div {
  width: 80px;
  height: 50px;
  border: 1px solid red;
}

设置完成后，元素会按照目标布局排列：第一列从上到下为3、2、1，第二列从上到下为5、4，容器右侧保留空白区域。

内容的提问来源于stack exchange，提问作者henry Chan