Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

flex 与 max/min-width 解决响应式列表页

  在响应式设计中,网格状的列表设计是个很纠结的问题。因为传统的网格设计都是固定一行显示几个,如果是自适应的话,当设备宽度很小时,内容可能被缩小到无法正常浏览的程度。所以我们应该限制元素尺寸的边界值,并动态计算每行显示的元素个数。
  flex的行为是让盒子尽可能地填满一行,所以使用flex我们就有了让元素充满行的保障。但设置了flex的元素对width就不太买账了,于是要使用比它更严肃的max-widthmin-width来设置。下面是效果:

  在宽度足够时一行会显示更多元素,并且在确保元素尺寸在限制范围内的情况下尽可能地填满一行。下面是代码: <style>
ul {
  border:1px solid red;
  padding:0px;
  display:flex;
  list-style:none;
  flex-flow:row wrap;
}
ul li {
  flex:1;
  min-width:50px;
  max-width:80px;
  height:50px;
  background:#CCC;
  margin:4px;
}
</style>
<ul>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^