当青训营遇上码上掘金，这张简单名片的灵感便得以在其中书写。
制作要点
本页面主要使用多个flex布局完成。
卡片居中对齐
将html标签的展示方式设置为flex，并且开启水平、垂直居中即可。
如果卡片没有垂直居中，那么最可能的原因就是页面高度没有撑开，可以为html设置height: 100vh，body即可垂直居中显示。
头像的对齐
头像原本采用relative + absolute的定位方式定位在卡片的右上角，但考虑到内容变动以及移动端适配，选择了代码量更少更加灵活的实现方式：flex中的justify-content: space-between;。
使用div将两行简介包裹在一起，与头像一起放在使用flex布局的标签内，便完成了头像和简介的左右分散对齐。再搭配align-items: center;完成头像的上下对齐，gap: 1em;使头像和内容保持间距。
移动端的简单适配
当页面宽度过小时，头像所在的行会被会挤压在一起，因此需要使用flex-wrap: wrap;令头像换至下一行。换行后的头像会靠左对齐，因此可以给头像添加margin: 0 auto;声明，使其在不受justify-content: space-between;制约时获得居中对齐的样式。
但作为名片，移动端的头像应该在简介上方，因此可以使用媒体查询选择器，在宽度小于480px时设置flex-direction: row-reverse;。
不觉得这样很怪吗？其实可以直接设置flex-direction: column-reverse;，这样可以同时完成头像的居中操作而不依赖头像的margin: 0 auto;声明。
引入图标
页面下方的GitHub和Bilibili图标使用了font-awesome 6.0.0的icon，通过字节跳动静态资源公共库以CDN方式引入。
图标也使用了flex展示方式，利用gap设置了间距。
总结
flex展示方式的出现，为前端开发人员提供了便捷的元素布局方式。另外，码上掘金这款前端Pen工具，可以编写、同步前端代码片段，并且提供了多样的自定义功能；字节跳动的CDN服务也为前端脚手架的获取、部署提供了极大便利。
