CSS-在大屏幕上，两列，在小屏幕上，一列具有动态高度

Question

我希望列表中的数据（在图像上）以2列或更多列显示，并且对于大屏幕，容器的大小应该固定，并在具有动态高度的容器中以1列显示。这是图片：

尝试将flexbox设置为固定高度，默认情况下尝试flex-direction:column，并且在媒体查询中查询width < 768，height: auto和flex-direction: row，但不起作用。有人帮忙吗？

Answer 1

就像一个简单的flexbox，只需在小屏幕上删除固定高度

.flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction:column;
  height: 200px;
}

.flex div {
  width: 100px;
  padding: 3px 10px;
}

@media screen and (max-width: 768px) {
  .flex { height: auto; }
}

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
</div>