仅CSS3 / HTML5行中的响应高度相等的列

Question

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

我找到了一个使用JS的工作示例：这是CODEPEN在线示例。

我进行了研究，但没有找到任何仅使用纯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项目沿横轴填充可用空间。这就是所有项目的高度相等的条件。

flex-wrap: wrap提供了进行多线柔韧性流动的可能性。否则，所有项目都将被监禁在同一行。

max-width: XX%默认情况下，一个block元素将填充所有可用空间。即使项目是灵活布局的子项目，由于flex-wrap规则取消了将所有项目堆积在一行上的约束，因此它们将在容器的整个宽度上伸展。因此，设置一定要增加的最大宽度就可以控制一行中要多少个项目。

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

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