基于屏幕最佳实践的大小不同的 div 数量？答案

【问题标题】：Different number of divs based on how large is the screen best practices?基于屏幕最佳实践的大小不同的 div 数量？
【发布时间】：2021-07-14 07:27:14
【问题描述】：

我对弹性框中的元素有疑问。我正在使用flex: 1 1 auto 和flex-flow: column wrap。我想显示一些随着屏幕大小而增加的 div。

使用媒体查询会很混乱，而且代码会很大。我正在寻找一种不使用媒体查询来实现它的方法，因为 flex 中每个 div 的大小约为 200px，我需要进行大量从低分辨率到高分辨率递增的媒体查询。

【问题讨论】：

在此处显示您的代码或您迄今为止所做的工作，以便我们可视化问题并为您提供帮助。

标签： html css flexbox responsive

【解决方案1】：

min-width 属性在这里非常有用。我放置了 15 个 div 来显示多种屏幕尺寸的效果。

.flex-parent {
  display: flex;
  flex-wrap: wrap; /* this makes the divs wrap */
}
.flex-child {
  margin: 3px;
  background-color: lightblue;
  min-width: 200px; /*prevents the flex-child from shrinking more than 200px */
  height: 50px;
  flex: auto; /* this auto-adjusts the width */
  
  /* Everything after this is just to align everything to the center */
  padding-top: 20px;
  text-align: center;
}

<div class='flex-parent'>
  <div class='flex-child'>CHILD</div>
  <div class='flex-child'>CHILD</div>
  <div class='flex-child'>CHILD</div>
  <div class='flex-child'>CHILD</div>
  <div class='flex-child'>CHILD</div>
  <div class='flex-child'>CHILD</div>
  <div class='flex-child'>CHILD</div>
  <div class='flex-child'>CHILD</div>
  <div class='flex-child'>CHILD</div>
  <div class='flex-child'>CHILD</div>
  <div class='flex-child'>CHILD</div>
  <div class='flex-child'>CHILD</div>
  <div class='flex-child'>CHILD</div>
  <div class='flex-child'>CHILD</div>
  <div class='flex-child'>CHILD</div>
</div>

【讨论】：

【解决方案2】：

使用flex-flow: row wrap。

如果您想在屏幕变宽时显示更多的div 元素，您需要将row 用于flex-direction，而不是column。使用flex-direction: row，弹性项目将从左到右放入每一行，就像一行文本。屏幕越大，可以容纳的物品就越多。

如果您希望您的弹性项目增长并填满所有可用空间，请使用flex: auto。这可能意味着项目最终具有不同的尺寸，因为您可以在每个弹性行中拥有不同数量的项目。如果您希望它们都具有相同的大小，您可以设置类似flex: 200px。

.flex-container {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
}

.flex-item {
  flex: auto;
  padding: 32px;
  background-color: bisque;
}

<div class="flex-container">
  <div class="flex-item">One</div>
  <div class="flex-item">Two</div>
  <div class="flex-item">Three</div>
  <div class="flex-item">Four</div>
  <div class="flex-item">Five</div>
  <div class="flex-item">Six</div>
  <div class="flex-item">Seven</div>
  <div class="flex-item">Eight</div>
  <div class="flex-item">Nine</div>
  <div class="flex-item">Ten</div>
  <div class="flex-item">Eleven</div>
  <div class="flex-item">Twelve</div>
</div>

如果您想将div 元素排列为列（从上到下），那么您的弹性容器需要在其上设置height，例如height: 500px。这样弹性容器就可以计算出每列可以容纳多少弹性项目。

.flex-container {
  display: flex;
  flex-flow: column wrap;
  height: 100vh;
  gap: 8px;
}

.flex-item {
  flex: auto;
  padding: 32px;
  background-color: bisque;
}

<div class="flex-container">
  <div class="flex-item">One</div>
  <div class="flex-item">Two</div>
  <div class="flex-item">Three</div>
  <div class="flex-item">Four</div>
  <div class="flex-item">Five</div>
  <div class="flex-item">Six</div>
  <div class="flex-item">Seven</div>
  <div class="flex-item">Eight</div>
  <div class="flex-item">Nine</div>
  <div class="flex-item">Ten</div>
  <div class="flex-item">Eleven</div>
  <div class="flex-item">Twelve</div>
</div>

【讨论】：

我使用了你的建议，我已经隐藏了溢出并且效果很好。感谢您的帮助。