Html 想让flex box项目随着屏幕大小而变得灵敏吗

我想让我的flxbox项目响应屏幕大小的变化，比如说，随着大小的减小，我不希望任何项目随着大小的减小而减小。我正在用它添加我的html和CCS，任何帮助都将是非常感谢的。现在，如果我写一个媒体查询，它会删除网站的某些部分

这是我的html

<div class="working-logos">

              <div class="apple">
                  <!--?xml  version="1.0" encoding="iso-8859-1"?-->

                  <svg height="50px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 305 305" style="enable-background:new 0 0 305 305;" xml:space="preserve">
                  <g>
                    <path id="XMLID_229_" d="M40.738,112.119c-25.785,44.745-9.393,112.648,19.121,153.82C74.092,286.523,88.502,305,108.239,305
                      c0.372,0,0.745-0.007,1.127-0.022c9.273-
                      C78.894,73.643,54.298,88.535,40.738,112.119z"></path>
                    <path id="XMLID_230_" d="M212.101,0.002c-15.763,0.642-34.672,10.345-45.974,23.583c-9.605,11.127-18.988,29.679-16.516,48.379
                      49.77C214.544,0.921,213.395-0.049,212.101,0.002z"></path>
                  </g>  
                  </svg>
                <p class="technology-logo">ios</p>
              </div>
              <div class="android">
                  <svg height="50px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 505.145 505.145" style="enable-background:new 0 0 505.145 505.145;" xml:space="preserve">

                  <g>
                                        <g>
                                            <g>
                                                <path d="M68.541,164.715h-1.294c-16.588,0-30.113,13.568-30.113,30.113v131.107" fill=""></path>
                                                <path d="M113.085,376.54c0,15.229,12.446,27.632,27.675,27.632h29.574v70.817" fill=""></path>
                                                <path d="M322.041,43.983l23.491-36.26c1.51-2.287,0.841-5.414-,108.911,317.49,108.911z" fill=""></path>
                                                <path d="M437.876,30.134V194.827     C468.011,178.283,454.464,164.715,437.876,164.715z" fill="#"></path>
                                            </g>
                                        </g>
                                    </g>
                </svg>
                <p class="technology-logo">Android</p>
              </div>
              <div class="html5">
                  <svg height="60px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27.17px" viewBox="0 0 27.17 27.17" style="enable-background:new 0 0 27.17 27.17;" xml:space="preserve">
               <g>
                 <path d="M1.609,0.008c0.013,0.129,0.023,0.248,0.033,0.367c0.103,1.153,0.203,2.307,0.307,3.4596

                   c-0.002-0.022-0.002-0.049-0.004-0.08c0.99,0,1.978,0,2.971,0c0.025,0.281,0.052,0.562,0.076,0.838
                   c0.044,0.49,0.088,0.979,0.13,1.472c0.004,0.056,0.021,0.078,0.075,0.094c1.076,0.287,2.15,0.578,3.228,0.867
                   c5.025,0,10.028,0,15.057,0C21.021,5.988,20.925,6.971,20.831,7.965z"></path>
               </g>
               </svg>
                <p class="technology-logo">html 5</p></div>
              <div class="windows">
                  <svg id="windowspurple" x="0px" y="0px" height="50px" viewBox="0 0 480 480" style="enable-background:new 0 0 480 480;" xml:space="preserve" class="windows-svg">
                      <g>
                        <path d="M0.176,224L0.001,67.963l192-26.072V224H0.176z M224.001,37.241L479.937,0v224H224.001V37.241z M479.999,256l-0.062,224   l-255.936-36.008V256H479.999z M192.001,439.918L0.157,413.621L0.147,256h191.854V439.918z" fill="#454545"></path>
                      </g>
                    </svg>
                <p class="technology-logo">Windows</p></div>
              <div class="wearable">
                  <svg x="0px" y="0px" height="50px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" class="wearable-svg">
                      <g>
                        <path fill="#454545" d="M381.095,97.276c-0.549-0.34-34.752-13.467-34.752-13.46
                      C305.884,217.348,290.924,202.393,272.54,202.393L272.54,202.393z M272.54,202.393"></path>
                      </g>
                    </svg>

                <p class="technology-logo">Wearable</p></div>
              <div class="cell"><img src="logo/cloud-wifi-iot-internet-things-512 (1).svg" height="50px;" width="50px;"><br><p class="technology-logo">IOT</p></div>
            </div>

现在我要做的是使这个弹性盒具有响应性，即元件的数量随着尺寸的减小而减少，反之亦然

试试看

.working-logos{
  display: flex;
  margin-left: 25%;
  margin-right: 20%;
  padding: 30px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  height: 50px;
  overflow-y: hidden;
}

我添加了一个固定的

高度

，并隐藏了y

溢出

。这应该具有将徽标包装到新行的效果，但它们将不可见（它们仍将位于DOM中）

代码沙箱演示技术

---

更新：我认为这是与OP讨论后想要的

您只需给出flex box的单个元素的最小宽度：和最大宽度：，之后它应该停止收缩和更改元素的行，我认为它对您有用

它无论如何都不起作用谢谢您的时间和支持effort@Avinash我在这里制作了一个代码沙盒；感谢您的努力，但我希望随着屏幕缩小，项目会移到下一行，而不会删除它们，我想您已经使用了react库，我希望它是纯html的，css@Avinash啊，好吧，我想我误解了这个问题。我认为你想要达到的是这样的目标（没有反应）；如果您希望您的项目与

flex start

保持一致，那么我认为您可能需要使用网格或第三方解决方案，但根据我的经验，这要复杂得多

.working-logos{
  display: flex;
  margin-left: 25%;
  margin-right: 20%;
  padding: 30px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  height: 50px;
  overflow-y: hidden;
}