Flex布局设flex-direction:column时元素并排显示未正常换行问题

• Flex容器配置位置错误
  你将display: flex、flex-direction: column属性设置在了循环生成的.col-1元素上，这部分属性仅能控制单个.col-1内部的.message-box的排列规则，无法控制多个.col-1本身的排列逻辑。如果所有.col-1的父容器未做flex纵向排列配置、或是父容器默认使用flex-direction: row，多个.col-1自然会横向并排显示。
• Flex属性存在冲突
  你给.col-1同时设置了flex: 1、flex-basis: 100%、width: 20px三个宽度相关属性，其中flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的缩写，会直接覆盖你提前声明的flex-basis: 100%。如果.col-1的父容器为flex布局，flex:1会强制所有.col-1等分父容器宽度，自然不会自动换行。
• 换行属性配置位置错误
  你把flex-wrap: wrap写在了.col-1元素上，该属性仅作用于.col-1内部的子元素换行，不会控制多个.col-1的换行逻辑。

根据你的实际布局需求，对应调整配置即可：

1. 如果你需要多个.col-1整体纵向排列：
   给包裹所有.col-1的父容器添加flex配置，示例代码如下（假设父容器类名为col-container）：

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

同时清理.col-1上的冲突属性，调整后的.col-1样式参考：

.col-1{
  /* 若不需要单个.col-1内部做flex布局，可删除以下两行flex相关属性 */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* 删掉冲突的flex:1、flex-basis:100%，保留你需要的尺寸参数 */
  width: 20px;
  height: 94vh;
  background-color: #747D88;
  justify-content: flex-start;
  align-items: center;
}

2. 如果你需要多个.col-1横向排列、总宽度超出父容器后自动换行：
   给父容器添加如下配置：

.col-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

同样清理.col-1上的冲突flex属性即可。

内容的提问来源于stack exchange，提问作者Zakarías Friðriksson