Html-字体图标、弹性布局的使用

Symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流也是平台目前推荐的用法。

相关介绍可以参考这篇文章这种用法其实是做了一个SVG 的集合，与另外两种相比具有如下特点:

支持多色图标了，不再受单色限制。

通过一些技巧。

支持像字体那样，通过font-size, color来调整样式。

兼容性较差，支持 IE9+，及现代浏览器。

浏览器渲染 SVG的性能一般，还不如png。

tip:一定要引入正确文件夹目录，否则就会出现空白乱码情况(一个白色的框框)。

二、弹性布局

弹性容器

1

2

3

flex-direction: column;column从上单下

1

2

3

justify-content: center; center:向主轴的中心位靠拢

1

2

3

justify-content:space-around;

space-around:平均分布，两边有距离，两边距离是中间的一半

1

2

3

justify-content:space-between;

space-between:平均分布，两边没有距离

1

2

3

justify-content:space-evenly;

space-evenly:(新)平均分布，两边都有距离，两边的距离和中间的是一样的

1

2

3

align-items: center;

设置测轴的内容分布

1

2

3

汇总：

1

2

3