html5 css3 获取高度,仅使用CSS3 / HTML5的行中响应相等的高度列

灵活盒和媒体查询的解决方案：

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提供了制作多线柔性流的可能性.否则,所有项目都被绑定到一行.

max-width：XX％默认情况下,块元素将填充所有可用空间.即使项目是flex布局的子项,由于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/