css - 什么 CSS 技术用于丰富的列/行嵌套内容框？

Question

我需要的是显示许多小的独立数据片段以及小按钮的内容框。在一个大的矩形框中，我需要许多列、行，它们相互嵌套，具有精确的尺寸、布局，以及一些拉伸(stretch)和收缩的能力，并且可能在页面宽度低于 1024 像素时换行。

我已经用 flexbox 做到了这一点，但它是 div 内的 divs 内的 divs，直到这样做似乎是错误的，所以我正在寻找其他选择。

我对 CSS 了解不多，所以我正在努力缩小我应该使用的技术集以及需要学习的技术来实现它。

具有绝对定位且一切都按像素布局的东西？

还是我应该继续使用 flexbox？

Answer 1

标准选项:

• 旧方法:将表格和 ul 元素与显示“内联 block ”混合使用。许多(如果不是大多数)网站确实在使用它，因为开发人员多年来不得不处理这个问题。如果您希望您的网站像素完美且响应速度并不重要，那么此选项实际上可能是最佳选择。

• Flexbox(您已经在使用它):您在“grid”容器元素上使用 display flex 并尝试排列它包含的子元素。 Flexbox 旨在使您的元素具有响应性/灵 active ，但它本身并不是一个网格。 (它是一维的)

• CSS Grid:最新的 vanilla CSS 替代方案。使用简单。它的行为与现在很多人习惯使用的 Bootstrap 网格非常相似。但是您首先必须在 CSS 中定义列和行的排列方式。

图书馆:

• Bootstrap:现在是一种行业标准。如果您希望元素像素完美，则需要使用固定网格而不是流动网格。

• PureCSS:带有您可以使用的辅助 CSS 类的轻量级库。

• Flexbox Grid:有点像 PureCSS，但只关注网格元素。

• ……还有很多。有人建议使用 React-Table，如果您的元素是基于 React 的，这非常好。