青训营项目难点总结——两端对齐自动换行顺序排列

实现的效果

如下图所示：

需求描述：

简单来说主要想实现这两端的距离相等，并支持自动换行，中间元素的宽度是固定的，但是整体宽度不固定，适配不同的窗口大小，中间的列数也不固定，但是无论窗口大小如何变化都要保证每行的左右距离窗口是相等的，中间元素的间距也是等分的。

遇到的问题：

使用flex布局，自动换行使用flex-wrap:wrap实现，基本可以基本满足需求，但是并不完美，当窗口缩小由于右侧的宽度满足不了一个元素，会导致最后一个元素换行，此时的右侧距离浏览器边缘的距离就是 一段小于一个元素的距离加上外部容器的padding， 看上去就是右侧比左侧要宽一些，当宽度缩小，右侧的距离就会不断减少直到和左边的距离相等。 如下所示：

于是尝试使用space-between进行两端的对齐 效果如下所示：

虽然两端对齐了，但是第二行也两端对齐了，这显然并不满足需求，发现使用flex基本是无解了

解决问题

经过团队小伙伴和导师的协助，改用grid进行尝试，发现可以很好的解决这类问题，感觉grid应该为这类布局而生的。

小问题：

使用grid布局在布局 repeat函数使用auto-fill后会有下面这个问题 使用auto-fill后的效果，总是会有间隙，虽然间隙也能够平分，但是依然不能满足需求

核心代码：

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));

• grid布局默认就是从左到右排列
• 定义每列的宽度，之所以没有使用auto-fill是因为他总会产生一个间隙，而产生间隙就会再拖拽调序的时候有个调整位置的行为，不顺滑
• minmax这个函数定义一个最小值和最大值，在这个区间内调整每列的宽度
• 1fr：代表每列平分之后1列的宽度

最后效果：

并且随着窗口的变化，每个元素会从最小值12.5rem到1fr伸缩变化，适配不同大小的窗口

参考资料：

www.zhangxinxu.com/wordpress/2… www.zhangxinxu.com/wordpress/2… www.ruanyifeng.com/blog/2019/0…