当青训营遇上码上掘金 在2023年的寒假期间内，很荣幸参与到了字节跳动的青训营活动学习，青训营官方账号发起了主题创作入营版的活动，我选择了主题1-我的名片，接下来将介绍一下我的主题创作思路。

主题1-我的名片

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作

主题创作思路

当我看到这个主题，介绍自己的时候，第一想法就是：每个人都不仅仅只有一个身份，不仅是父母心里的小宝贝，也是学校里面认真学习的学生，也是职场里面工龄较短的打工人...

所以我选择了利用前端中的主流布局 flex 完成该主题创作，正好巩固自己前段时间学习知识，检验是否能够熟练使用 flex 布局。

部分代码分析

HTML 部分代码解析

    <li class='detail'>
      <h1>学生</h1>
      <span>学校：河海大学</span>
      <span>专业：电子信息</span>
      <span>年纪：研二</span>
      <span>...</span>
    </li>

由上述代码所示，用 li 作为身份卡片item项，在身份卡片里面存在多个描述身份的元素标签，也正是这些元素标签用来做 flex 布局

css 部分代码解析（flex布局）

ul{
  display: flex;
  flex-wrap: wrap;
}

由于 flex 属性是写在需要flex布局元素的父级身上，在此次主题创作中,li作为身份卡片的 item 项，因此li是需要 flex 布局的元素，那么flex属性需要写在 ul 身上。

li{
  display: flex;
  flex-direction: column;
  width: 250px;
  height: 230px;
  background-color: aquamarine;
  margin:10px;
  padding-left: 30px;
  box-sizing: border-box;
}

该部分代码将 flex 属性写在了 li 身上，由此推断该部分 flex 布局将会作用在 身份描述属性 span 标签元素身上。该部分还利用到了 flex-direction 属性（修改 flex 布局的主轴方向），默认属性值为 row 水平方向，修改为 column 属性值，那么主轴变成了 垂直方向。