html - 仅使用 CSS3/HTML5 的行中的响应式等高列

Question

我想使用 div 创建响应式表格布局，以在仅移动设备 上显示，其中元素相等每行的高度仅使用 CSS/CSS3 而不是 JavaScript，也不是 jQuery 或插件。

我找到了一个工作示例，使用 JS:这里是 CODEPEN live example .

我进行了研究，但我没有找到任何仅使用纯 CSS/CSS3/HTML5(例如 flexbox) 的工作示例。

最好的是只有 float 的 div，没有 hack CSS 代码:布局应该有不同的列号，根据不同的设备尺寸，像下面的截图一样响应式工作:

移动布局

平板电脑布局

桌面布局

Answer 1

使用 flexboxes 和 media queries 的解决方案: http://jsfiddle.net/szxmw7ko/4/

#container{
  display: flex;

  align-items: stretch;
  flex-wrap: wrap;
} 


@media (max-width: 480px) {
    #container div {
        max-width: 98%;
    }
}
@media (min-width: 480px) and (max-width: 1080px) {
    #container div {
        max-width: 48%;
    }
}
@media (min-width: 1080px) {
    #container div {
        max-width: 23%;
    }
}

align-items: stretch 告诉 flex 元素填充 cross axis 上的可用空间.这就是允许所有元素具有相等高度的原因。

flex-wrap: wrap 提供了制作多行 flex 流的可能性。否则，所有元素都被监禁在一行中。

max-width: XX% 默认情况下， block 元素将填充所有可用空间。即使元素是 flex 布局的子元素，由于 flex-wrap 规则解除了将所有元素堆叠在一行中的限制，它们也会拉伸(stretch)到容器的整个宽度。 因此，设置一个最大宽度(一定会提高)可以控制您想要在一行中放置多少个元素。

@media (max-width: XX%) 最后，您只需调整元素的宽度即可根据大小定义所需的列数视口(viewport)。

Flexbox 资源:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/almanac/properties/f/flex-wrap/