仅使用 CSS3/HTML5 的响应式等高列 [英] Responsive equal height columns in rows with CSS3/HTML5 Only

问题描述

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

我找到了一个工作示例，使用 JS:这是

#container{显示:弯曲；对齐项目:拉伸；弹性包装:换行；}@media(最大宽度:480px){#容器分区{最大宽度:98%；}}@media(最小宽度:480px)和(最大宽度:1080px){#容器分区{最大宽度:48%；}}@media(最小宽度:1080px){#容器分区{最大宽度:23%；}}

align-items:stretch 告诉 flex 项目填充 交叉轴.这就是允许所有项目具有相等高度的原因.

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

max-width: XX% 默认情况下，块元素将填充所有可用空间.即使项目是 flex 布局的子项，由于 flex-wrap 规则解除了将所有项目堆放在一行上的约束，它们将延伸到容器的整个宽度.因此，设置一个必然会升高的最大宽度，可以控制您想要在一行中放置多少个项目.

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

弹性盒资源:
https://css-tricks.com/snippets/css/a-flexbox 指南/
https://css-tricks.com/almanac/properties/f/flex-换行/

I would like to create a responsive table-layout with the use of the div, to be displayed for mobile devices only, where the elements has equal height for each rows using only CSS/CSS3 and not JavaScript, nor jQuery or plugin.

I found a working example, that uses JS: here is the CODEPEN live example.

I've made a research, but i did not find any working example that make use only of pure CSS/CSS3/HTML5 (flexbox for example).

The best is to have only floating divs, and no hack CSS code: the layout should have different column number, as per different device size, working responsive like the screenshots below:

Mobile Layout

Tablet Layout

Desktop Layout

解决方案

A solution with flexboxes and 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 tells to the flex items to fill the avalaible space along the cross axis. This is what allows to have equals height for all items.

flex-wrap: wrap gives the possibility to make a multiline flex flow. Otherwise, all items are jailed into one line.

max-width: XX% by default a block element will fill all avalaible space. Even if items are child of a flex layout, because of the flex-wrap rule which lifts the constraint of piling all the items on one row, they will stretch over the entire width of the container. So setting a maximum width, which will necessarily raised, gives the control of how many items you want on a row.

@media (max-width: XX%) finally, you have just to adapt the width of an item to define how many columns you want depending on the size of the viewport.

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

这篇关于仅使用 CSS3/HTML5 的响应式等高列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！