响应式布局-（media、flex、rem） 最后一行左对齐

响应式布局

media

1. 媒体查询：设置最小最大宽度等，在不同的宽高范围进行css代码的编写，也就是说有几套不同的方案（有点废代码）

flex

1. 主轴与交叉轴：主轴与交叉轴是可以自己设定的，子盒子的主轴与交叉轴与父盒子保持一致
   

2. align-items 与 align-content
   a. 前者处理单行，也就是将每一行 当做是一个整体
   b. 后者处理多行，也就是将所有行 当做是一个整体

3. 设置在子盒子上面的属性
   flex-basic ：设置弹性盒子伸缩基准值(设置了这个，width将会失效，这里用百分比的话是相对于父盒子计算的）
   flex-grow ：设置弹性盒子的扩展比率（子盒子间的比率 分配剩余空间的比例）
   flex-shrink：设置弹性盒子缩小比率（切割超出空间的比率）
   flex：以上三个的缩写(grow shrink basic 此顺序不能乱)

rem

1. 相对于根元素（html）的字体大小的单位
2. 与em的区别在于em是相对于父级的字体大小，但是这样就很复杂了
3. 可用js获取设备的宽高并手动设置根元素字体的大小

难题

1. 问题：如何让最后一行左列表对齐：在不同的屏幕尺寸下，最后一行的列表都优雅地自动朝左对齐

2. 实现方式：配合flex布局，使用i标签进行占位

3. 具体实现：
   （注意：我下面说的子盒子都是那些你想要展示出来的盒子）
   父盒子用上flex贴两边对齐，允许换行
   在最后一个子盒子后面放上一堆i标签，i标签的宽度与子盒子的宽度一致（子盒子宽度固定），i标签不设置高度

4. 原理：只要有子盒子的最后一行的子盒子数与上面的子盒子数一致，那么最后一行的盒子就会有上面的全部对齐；而是使用的i标签在没有设置高度的情况下并不会影响纵向的布局；

5. 注意：
   i标签的数目要大于或者等于一行可以放下子盒子的最大数目，比如说一行可以放下30个子盒子，你就最少得放30个i标签，以此来保证每一行的子盒子数目一致
   i标签只是用来占位的，换成其他标签也是可以的

6. 缺点：使用了额外的标签进行占位，html代码难看

/* 父盒子 */   
display: flex;
justify-content: space-around;
flex-wrap: wrap;

我的感想

1. 就我个人目前来说，可以不用media的地方就不用media，大部分的适配问题都用flex来解决
2. rem还没怎么正式用过