使用flex-direction实现类表格布局时单行无法放置多个元素如何解决

你遇到的问题是Flex布局未正确启用导致的：使用Flex相关属性前必须先给容器设置display: flex，仅写flex-direction不会生效，因此行内的块级元素还是默认垂直排列。

修正后的CSS代码如下：

.boardTitle{
  margin-top: 10px;
  text-align: center;
  font-size: 20px;
  color: red;
}
.boardTable{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.boardRow{
  display: flex;
  flex-direction: row;
}
.thread{
  border: solid;
  flex: 1; /* 可按需保留，作用是让同行的单元格宽度均分 */
}

HTML代码无需修改，运行后即可实现行内多个元素横向排列的类表格效果，你可以根据需求额外调整单元格的内边距、边框样式、对齐方式等属性。

内容的提问来源于stack exchange，提问作者King Of Chads