移动端（手机端）三列布局

Question

各位大佬好，我想问一下你们一般是怎么处理自适应三列布局的（如图），每个手机宽度不一样，
1: 你们是把每个列的宽度写死，然后每列之间的间距自适应?

2: 还是把间距写死，让列宽自适应？

还有就是自适应之后每个div块的高度怎么设置？变形怎么处理？

谢谢！

Answer 1

“1: 你们是把每个列的宽度写死，然后每列之间的间距自适应? 2: 还是把间距写死，让列宽自适应？”
这也是要看你内容滴。这两个并不冲突，可以一起使用。比如：
在0 ~ 500px，采用宽度自适应，间距写死;500 ~ 900，采用间距自适应，宽度写死；900以上，一列三个变四个或者更多，宽度写死...

自适应是一个比较灵活的东西，怎么好看怎么来，配合着内容来，不是固定写法。
变形的话，一个是文字内容，文字可以居中处理或者统一左对齐也行，另一个是图片，图片也是一样可以居中处理，一个原则就是不能让图片发生形变（拉伸变形）。

高度处理的，一种是宽高用rem单位，一起放大缩小；如果用px的话，就最好维持它原先高度好了。处理自适应主要是一个宽度问题，不同手机高度不同可以不管，毕竟都是能滚动屏幕的。

Answer 2

flex: https://www.ruanyifeng.com/bl...