java网站开发文档规范宁波seo外包推广渠道
前言
做一个桌面应用的需求，要求所有元素平铺排列，窗口大小改变后会自动换行，且上下对齐
flex布局
在flex布局中，如果使用justify-content: space-between; 最后一行没铺满的时候也会左右对齐，不能达到上下对齐的效果，所以需要设置after，让最后一行变成左对齐。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style type="text/css">li {list-style: none;}.list {width: 100%;box-sizing: border-box;display: flex;justify-content: space-between;flex-wrap: wrap;padding: 10px;}.list:after{content: "";flex: auto;}.item {width: 220px;height: 60px;background-color: azure;margin-bottom: 10px;border: 1px solid red;margin-right: 17px;}.item:nth-child(5n){margin-right: 0;}</style><body><div style="width: 1200px; margin: auto; background-color: #cccccc; height: 500px;"><ul class="list"><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li></ul></div></body>
</html>
这里每个item的margin-right要调整，才能达到上下对齐的效果
问题一
对于桌面工具来说，窗口缩放时margin的比例会改变，造成最后一行与上面不能对齐的情况。
这种方法对于固定宽度的窗口是有效的。
解决：给每一个item设置flex的比例：
.item {flex: 0 0 20%height: 60px;background-color: azure;margin-bottom: 10px;border: 1px solid red;padding: 10px;}
这种方法虽然可以自动让上下对齐，但也有缺点，它的一行只能放5个元素了，如果窗口变大也不会增多元素。
grid布局
改成grid布局，可以完美实现这个需求
.list {display: grid;/* 根据容器宽度自动填充列 */grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));justify-items: stretch;}
这里 grid-template-columns参数的minmax要根据item的宽度调整。
总结
如果屏幕宽度不会改变可以选择flex布局，推荐使用grid布局，效果很好。