响应专栏

Question

对于响应式网页设计，建议使用哪些方法来完成以下css显示。

我真的只有一个要求。最多三列。因此，如果有20个字母，它们将在三个列之间平分。

将使用SCSS。欢迎使用Flexbox和CSS网格。我不想使用Bootstrap（我知道网格系统存在）。

屏幕宽度＆lt; 1000像素：

A D G
B E H
C F

屏幕宽度＆lt; 500px的

A E
B F
C G
D H

屏幕宽度＆lt; 200像素：

A
B
C
D
E
F
G
H

这是一个带有一些起始代码的codepen。我似乎无法找到一个足够好的系统。

https://codepen.io/basickarl/pen/NjgvNa

我正在考虑使用CSS网格，但这不再使它变得动态（硬编码定位）。此列表中的项目将更改。

Answer 1

不确定您是否正在寻找此功能，但确实有效。

＆＃13;

＆＃13;

div {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  max-width: 1200px;
}

@media screen and (min-width: 1000px) {
  div {
    background: red;
  }
  el {
    width: 33.3333%;
  }
}

@media screen and (min-width: 500px) and (max-width: 1000px) {
  div {
    background: grey;
  }
  el {
    width: 50%;
  }
}

@media screen and (min-width: 200px) and (max-width: 500px) {
  div {
    background: lime;
  }
  el {
    width: 100%;
  }
}

el {
  text-align: center;
  background: green;
  margin: 2em 0em;
  align-self: flex-start;
}

＆＃13;

<div>
  <el>A</el>
  <el>B</el>
  <el>C</el>
  <el>D</el>
  <el>E</el>
  <el>F</el>
  <el>G</el>
  <el>H</el>
</div>

＆＃13;

＆＃13;

＆＃13;

此外，对于n列，您可以执行以下操作：

el {
  width: calc(100%/n);
}

Answer 2

专门实现我之后创建两个单独列（每个包含A到H）的唯一方法。一个有三个，另一个有两个（变成一个）。一个隐藏，另一个显示，反之亦然。