flex 平均分布 换行对齐 文件管理器宫格布局

如何可以使用flex布局 进行平均分布,又可以换行呢?
第一步:
设置flex容器元素样式
display: flex;
display: -webkit-flex;
justify-content: space-around;/或者space-between/
flex-direction: row;
flex-wrap: wrap;

效果:


屏幕快照 2018-09-16 下午8.32.45.png

第二步:
设每一行最多显示n个元素,向flex容器追加2*n个元素,追加的元素的样式继承flex子元素的样式,并设置每个元素的高度为0,visibility:hidden;
效果:


屏幕快照 2018-09-16 下午8.36.15.png

第三步:

若每行的元素个数不随window宽度变化而改变

设置flex容器元素宽度100%;
设置元素宽度x%,x为每一行最多显示的个数分之一,百分比;

若每行的元素个数随window宽度变化而改变

设置flex容器元素宽度100%;
设置元素宽度x%,x为每一行最多显示的个数分之一,百分比;
设置元素的max-width min-width在一个合适的范围

不完美之处:若只有一行,宽度继续增大,元素间距在变化。而我期望只有一行时,宽度足够大时,变化宽度,元素间距不变化。希望有人能提供解决方案。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,097评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,346评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,812评论 0 2
  • 使用纯 CSS 实现 500px 照片列表布局 文章很长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读...
    HZ充电大喵阅读 2,695评论 0 4