仿朋友圈布局：1~9宫格css自适应
Demo：https://sunzsh.github.io/html-demos/timeline.html
代码：https://github.com/sunzsh/st-html-demo/blob/master/timeline.html
大家好，我们都知道
朋友圈里，不同数量的照片
会有不同的排列布局
今天我写了一个
根据数量，自动实现这个布局的css
什么原理呢
我们先来看一下一张照片的时候
首先我们在外层的容器
设置一个 flex 布局
然后固定一个宽度允许换行
然后只有一张照片的时候呢
我们用到了一个 only-child 的伪类
就说这个容器下面的
并且只有一个
然后设置以宽度百分之百就可以了
然后两张照片的时候呢
我们分了两部分来写这个选择器
第一部分代表第一张照片
啊第二部分代表第二张照片
那什么原理呢就是这个隐秘的元素
必须是第一个元素
同时他必须是倒数第二个元素
那这两个选择器组合在一起
就只能命中
只有两张照片的情况下的第一张照片
那第二张照片
同理他必须是第二个元素
同时必须是倒数第一个元素
所以呢这一段样式他只能命中
有两个照片的情况下的
每一张照片
然后呢下面再给设一个margin-left
有三张照片的情况下
跟这个类似写法也是一样的
必须是第一张照片
同时必须是倒数第三张照片以此类推
然后呢给后两张照片设一个margin-left
然后四张照片的情况下不太一样
首先呢
然后第二部分呢我们用波浪线来代表
第一张后面的所有的img
然后呢再来设置
第二张和第四张
就是这两张的 marin-left
再来设置第二张后面
所有的 的 margin-top
比如说后面这两张
然后五张以上他们的大小都一样了
所以呢五张以上的情况下
就写了一套样式
那意思是
这个 标签必须是第一个元素
并且他是倒数第56789都可以
只要是倒数
第五个以上的元素都可以命中
然后呢还是
这第一张元素后面的所有的
他们的宽度都是130
然后我们要设置第二列
和第三列所有的图片的 margin-left
写法呢就是第 3n-1
那 3n 呢就代表第三列
他们的 margin-left 是3
那这样写的话呢
我们要排除掉
（只有）4张照片的情况下的第3张
也就是说
四张照片下的第三张是在这个位置
他不能有 margin-left
我们要把它排除在外
然后呢再去设置
第三张以后所有的的margin-top
也就说从第二排往后都要有margin-top
好到这里呢九宫格的样式就写完了
今天就到这里谢谢大家
最后更新于
这有帮助吗？