用于逐行流动文本的 CSS 网格布局

Question

我正在显示诗歌:诗歌和歌词。我有一种布局，其中歌词作为多列文本流动。我让它与 flex 布局一起工作，但它不是我 100% 满意的。请参阅此代码笔:https://codepen.io/sidewayss/pen/WNNEBgV

剩下的问题是列的水平间距。 Flex 布局展开列，就好像我设置了 align-items:space-between 的替代版本一样.我希望列左对齐，这只能通过设置容器的宽度来实现 <div>比开始水平滚动的宽度大一个像素，这是显示所有文本的最小宽度。

在我看来，应该有一种方法可以用网格布局来做到这一点，但我没能实现它。我尝试了多种设置，包括各种自动流设置。

在 CSS 中是否有解决此问题的方法，还是我必须依赖 JavaScript？我有一种在 JS 中执行此操作的方法，并且我已经拥有操纵这些元素的代码，但我更愿意在 CSS 中执行此操作。这似乎是一个极其合理的布局要求，至少对我而言。我在网格布局方面遇到的最大问题是需要设置行数和列数以及调整这些列的大小。我希望这一切都是自动的，否则我仍在编写 JS 代码来设置这些值。

Answer 1

div {
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  height:300px;  
  overflow-x:scroll;
  /* align block to start*/
  align-content: flex-start; 
}
span {
  padding:0 8px;
  /* align child block to start*/
  align-self: flex-start;
}