伸缩行不换行

2024-05-21 • 问答

我正在使用媒体查询为伸缩行设置断点，但是在缩小窗口时，容器中的这些伸缩项没有自动换行。

CSS

* {
  box-sizing: border-box;  
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.child {
  height: 50px;
  flex: 1;
  min-width: 25%;
  border: 1px solid black;
}

@media (max-width: 720px) {
  .child {
    min-width: 50%; 
  }
}

@media (max-width: 360px) {
  .child {
    min-width: 100%; 
  }
}

HTML

<div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

zhuyanjunhunan 回答：伸缩行不换行

您的CSS样式应优先用于移动设备，并使用最小宽度而不是最大宽度

   listen 80 default_server;
   server_name domain.com www.domain.com;

   location = / {
    }

   location ^~ /rapor/ {
   root /var/www/rapot/test/build;
   try_files $uri /index.html;
    }
}```

thanks :)

css flexbox media-queries responsive-design

本文链接：https://www.f2er.com/3061016.html

伸缩行不换行

zhuyanjunhunan 回答：伸缩行不换行

大家都在问