# 仿朋友圈布局：1\~9宫格css自适应
* 抖音：
* B站：
> Demo：
>
> 代码：
大家好，我们都知道
朋友圈里，不同数量的照片
会有不同的排列布局
今天我写了一个
根据数量，自动实现这个布局的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
好到这里呢九宫格的样式就写完了
今天就到这里谢谢大家
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://sunzsh.gitbook.io/xiaoshan.bug/fang-peng-you-quan-bu-ju-19-gong-ge-css-zi-shi-ying.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.