flex 平铺布局_flex 布局 自适应 靠左对齐

需求

假设我有5个300px*300px的卡片，需要根据屏幕宽度自适用平铺排列，并在换行的时候靠左对齐。

不能用js实现，用js就太简单了，而且代码会比较啰嗦和让人困扰。

核心知识

利用flex容器的justify-content: flex-start和flex-wrap: wrap完成自动换行靠左需求

利用calc和margin-left完成子项目平铺需求

单单利用justify-content: space-evenly完成不了需求

直觉上，利用这个属性和wrap就可以满足，但实际上不可以，因为会每行各自计算空隙，这样会导致最后一行对不齐，效果如下

利用flex-start和margin-left: calc实现

1. 数学公式

flex-start可以满足我们靠左对齐的需求。接下来，我们只要完成间距的需求就可以了。子项目宽度是固定的300px，那么根据容器的宽度，肯定就能计算出来间距了，例如宽1000px的容器，那肯定只能容纳3个子项目，剩余100px空间，一个四个空隙，那每个空隙就是25px。

conWidth 容器宽度

itemWidth 子项目宽度

每行子项目个数 n = Math.floor(conWidth/itemWidth)

嗯，貌似是搞定了，我们转化成css中calc就是：