Question

我对表格设计的要求是：像这样“在没有剩余空间的情况下，列需要换行”

a1 b1
a2 b2
.. ..
.. bm
an

视口较小，“表格”需要包装到

a1
..
an
b1
..
bm

可以有更多列，而不仅仅是2。

我尝试使用CSS Grid和Flexbox，但无法实现我想做的事情。有任何想法吗？

此处不允许使用表标签：( CSS Grid最好。.但是....

我目前的想法是这样的：https://codepen.io/GEdelmann/pen/BqorwY 但是，当您必须处理动态内容时，它会遇到困难。

Answer 1

您始终可以使用Bootstrap网格系统。

OR

获取一些Flexbox snippets

概念证明here

HTML

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

CSS

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;

  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

Answer 2

根据您想要的布局，并以类似的网格模板区域格式给出示例。通过设置媒体查询以相应地更改网格模板区域，您可以完成从列出的2列到1列的操作。我注意到1列示例中缺少a2和b2，因此我假设您希望在屏幕尺寸小于X数量时将它们删除。我使用您的示例输入了一个快速的代码笔，并实现了根据您的示例描述格式化块的目标。您可以在媒体查询中随意移动块。

https://codepen.io/skazx/pen/ReWeBP

@media (max-width: 600px) {
    .wrapper{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "a1"
        "."
        "an"
        "b1"
        "."
        "bm"
    }
    .a2{
        display: none;
    }
    .b2{
        display: none;
    }
}

Answer 3

只需将列项目包装在div内，并将所有内容包装在flexbox或网格容器内。

示例：https://codepen.io/antekai/pen/NOGEYB?editors=1100

HTML

FLEXBOX SOLUTION

<div class="flex-container">
  <div>
    <div class="item">a1</div>
    <div class="item">a2</div>
    <div class="item">a3</div>
  </div>
  <div>
    <div class="item">b1</div>
    <div class="item">b2</div>
    <div class="item">b3</div>
  </div>
</div>

CSS GRID SOLUTION

<div class="grid-container">
  <div>
    <div class="item">a1</div>
    <div class="item">a2</div>
    <div class="item">a3</div>
  </div>
  <div>
    <div class="item">b1</div>
    <div class="item">b2</div>
    <div class="item">b3</div>
  </div>
</div>

CSS

//flexbox solution
.flex-container{
  display:flex;
  flex-flow:row wrap;
}
// CSS Grid solution
.grid-container{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr))
}
//helper class
.item{
  height:100px;
  width:200px;
  background-color: black;
  color:white;
  margin:10px;
}

编辑

在以下链接中，您可以找到增强的解决方案，以解决物品高度不相等的情况。对于flexbox解决方案，基于动态JS的增强，对于CSS网格，基于静态CSS的增强。增强的逻辑是相同的：添加一个高度等于各个项目之间的高度差的空项目（例如，当a1-b1> 0时，b1之后的空项目的高度= a1-b1，这导致a2和b2的垂直对齐））。 flexbox增强的解决方案可以扩展到CSS网格解决方案，反之亦然。

示例：https://codepen.io/antekai/pen/OBMyqv

注意：对于基于JS的增强功能（flexbox解决方案），当您在断点之间调整视口大小（400px）时，只需键入任何内容（至html，css或js面板），以便Codepen刷新实时重新加载。

如何进行响应式列换行？

3 个答案: