【发布时间】：2019-09-19 00:49:34
【问题描述】：
我正在开发类似于看板的东西，我在列中（也由 div 表示）布置卡片（由 div 表示）。图 1 说明了我的应用的当前状态：
每张卡片都是一个 div。这些卡片按列（红色虚线）分组，这些列是在 flexbox 布局中布局的 div。着色说明了卡片映射到哪个版本。
一些代码： index.html：
<!doctype html>
<html>
<head>
<title>Some code to copy & paste into your project</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="map">
<div class="column">
<div class="card release-1"></div>
<div class="card release-2"></div>
<div class="card release-3"></div>
</div>
<div class="column">
<div class="card release-1"></div>
<div class="card release-1"></div>
<div class="card release-3"></div>
<div class="card release-3"></div>
</div>
<div class="column">
<div class="card release-2"></div>
<div class="card release-2"></div>
<div class="card release-3"></div>
<div class="card release-3"></div>
</div>
</div>
</body>
</html>
styles.css：
.map {
display: flex;
flex-direction: row;
}
.column {
display: flex;
flex-direction: column;
}
.card {
width: 100px;
height: 80px;
border: 1px solid black;
margin: 10px;
}
.release-1 {
background-color: #f90;
}
.release-2 {
background-color: #0a0;
}
.release-3 {
background-color: #0af;
}
现在我想为发布添加泳道。结果应如下所示：
我没有找到任何方法将“断点”之类的内容放入弹性列中以将卡片移动到下一个泳道。
网格可以工作，但我需要事先知道我将拥有多少列和泳道。由于地图是动态渲染的，我也需要动态渲染 css。看起来对我来说不是最好的方法：-P
很明显，这可以通过 html 表格完成，但有两个原因使我无法使用它们：
- 在基于 div 和 css 的浮动布局取代表格布局的时代，我了解到表格只能用于数据，不能用于布局
- 我的整个布局已经基于 div。切换到表格需要我想避免的重大努力
支持表格的事实是，用表格实现这种布局非常容易。我也不希望有任何负面影响，因为这种布局无论如何都不意味着浮动或中断。它只是两个固定尺寸，视口之外的所有内容都会滚动。
无论如何：在我重新编写所有内容之前，我想知道这是否也可以通过 flex/flexbox 布局或任何其他我还没有听说过的方式来实现。
现在我没有使用前端框架，只是简单的 html 和 css。我想 尽可能保持这种状态。
你有什么建议吗？
提前致谢！ 弗雷德
【问题讨论】：
-
FWIW - CSS-Grid 将是要走的路。
-
你的 Github 模拟对理解没有任何帮助
-
@yuzen：这就是我一开始没有发布它的原因。我刚刚添加了它，因为似乎 stackoverflow 法律要求我在获得好的建议之前发布一个不好的方法。
-
所以我添加了一些你可以c&p到你自己的项目的代码。我猜你们脑子里已经有了相同的代码，因为你们似乎都是真正的专业人士。我还解释了为什么网格不是我最喜欢的解决方案。
标签： html css layout flexbox css-grid