使用最小最大属性时带有弹性框的响应式样式答案

【问题标题】：Responsive styles with flex box while using min max property使用最小最大属性时带有弹性框的响应式样式
【发布时间】：2021-03-10 14:29:54
【问题描述】：

我正在尝试使用 CSS flexbox 进行响应式设计。这是我想要实现的细节。

在 flex-direction 行中显示 max-width:300px 的项目。
当我们缩小浏览器窗口时，一行中的项目将保持在同一行，直到单个项目的宽度变为 200 像素，最小宽度：200 像素。当宽度达到 min-width:200px 时，右侧的项目将移动到下一行。

我无法使用弹性框完成这项任务。有没有人可以帮助我解决这个问题。将不胜感激。提前致谢。

这是代码，我已经试过了：

 .wrapper{
  width:100%;
  height:100%;
  }
  .content{
    display:flex;
    flex-direction:column;
    width:95%;
    margin: 0 auto;
  }
  .header{
      display:flex;
      justify-content:space-between;
      margin-top:16px;
      padding-left:20px;
      background: #E0E3E7;
      border-radius: 4px;
      min-height: 56px;
  }
  .box{
      background: #F0F2F3;
      border-radius: 4px;
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      min-height:119px;
  }
  .box-item{
      background: #FFFFFF;
      border-radius: 4px;
      border: 1px solid #C2C7CF;
      max-width:300px;
      min-width:200px;
      width:100%;
      height:56px;
      margin-left:32px;
      margin-right:32px;
      margin-top:10px;
      margin-bottom:10px;
  }

还有，这里是小提琴链接：https://jsfiddle.net/961ruj3q/32/

【问题讨论】：

标签： html css reactjs flexbox responsive-design

【解决方案1】：

例如，我会在其中添加一个 min-width: 264px ，这样输入就不会从容器中出来。而对于另一个问题，由于 max-width 为 100%，因此输入将始终采用最大尺寸，即 300px，因此在容器变小之前无法将其设为 200px。

当屏幕太大时，您可以使用媒体查询设置更小的输入尺寸。

PS：我也是使用 Flexbox 的新手，这是我能想到的解决方案。您好，希望对您有所帮助

【讨论】：