想让 flex-box 项目随着屏幕尺寸变得响应

Question

I want to make my flxbox items responsive with the screeen-size change let's say as size decreases i want no of items to be reduced as size decrease. i am adding my html and ccss with it , any help would be appriciated.now if i am writting a media query it makes some part of the site removed

this is my 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>

this is my csss

.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;

}

now i want is to make this flex-box make responsive ie no of elements decrease with the size reduction and vice-versa

Answer 1

Try;

.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;
}

I've added a fixed height and hidden the y overflow . This should have the effect of wrapping the logos onto a new line, but they won't be visible (They will still be in the DOM).

Codesandbox to demonstrate technique; https://codesandbox.io/s/festive-wilbur-kgudq

UPDATE: I think this is what is wanted after discussion with OP; https://codesandbox.io/s/strange-ishizaka-9dpsf

Answer 2

你只需要给出 flex-box 的单个元素的 min-width: 和 max-width: 之后它应该停止缩小和改变元素的行，我认为它对你有用