justify-content对齐问题描述

justify-content属性控制了水平轴上项目的对齐方式 但是如果最后一行列表的个数不满 就会出现最后一行没有完全垂直对齐问题

1.如果每行列数是固定的(例如4个)

不使用flex的两端对齐效果 中间的gap间隙使用margin自己控制

2.如果每一子项的宽度是不固定

由于此时间隙的大小是不固定 对齐不严格 因此我们可以直接让最后一行左对齐即可 有两种方案

2.1.最后一项margin-right:auto;

2.2.父元素创建伪元素并设置flex:auto;或者flex:1;

2.如果列数不固定 同时布局的列表个数又不固定 可以利用grid布局

grid布局天然就有gap间隙 且天然有格子排列对齐 最后一行实现左对齐是最合适的方法