css - 移动端布局的问题

Question

移动端要实现一行三个方块的布局，大小自适应，

1、里面的小方块（书籍封面）的width和height写死时， 如何实现这样的布局？

2、小方块（书籍封面）的width和height不写死时， 如何实现这样的布局，？

哪种方法实现比较简单？

Answer 1

If you feel like writing it to death, you have to calculate the distance between the left and right margins of each cover. You should be able to calculate it using calc in css

If you don’t write it to death, using display:flex should be the easiest to implement

Answer 2

Write words to death. . Is the rem adaptation considered hard-coded?
If I don’t write it down, it’s the flex mentioned above.

Answer 3

If you want to hard-code it, put a container with a width of 33.3% outside each book. If the inner width is fixed, use margin:auto. Use calc to save one layer of containers, and you can also use viewport units~
Don’t hard-code it, flex It can be achieved, and the percentage width and viewport unit can also be changed