流式宫格布局的几种方案

实现如下效果图

• 每个card宽度相同
• card左右之间的间距固定
• card左右之间的间距不固定

效果图

怎么实现自动换行？

• flex-wrap
  demo-001

• float
  demo-001

• inline-block
  块级元素独自占一行，而行内元素当宽度不够时，才会换行。
  demo-004

card宽度怎么计算？

情况一

card左右之间边距固定，card和父容器左右边距固定

• calc() 、margin-right、nth-of-type()
  demo-001

image.png

• 多一个元素、padding-left、padding-right
  demo-002

card左右之间边距不固定，card和父容器左右边距固定

• margin 百分比
  demo-005

card左右之间边距不固定，card和父容器左右边距不固定

• margin 百分比
  demo-006