Flex 彩色横向序号条

页面效果:
横向均分 6 个彩色色块，每个色块中间有白色圆形数字序号。

核心知识点:
1.Flex 弹性布局
display: flex：给父容器开启弹性，子元素默认横向排列
flex: 1：所有子盒子平分父容器剩余宽度，实现等分效果
2.属性选择器
div[class^=item]：选中 class 名称以 item 开头的 div，统一设置均分宽度
3.圆形数字居中技巧
border-radius: 50%：正方形盒子设置后变成圆形
text-align: center：数字水平居中
line-height = 盒子高度：数字垂直居中
margin: 12px auto：圆形在色块内上下、水平居中

布局结构:
外层大容器 flex → 6 个彩色等分色块 → 每个色块内部放圆形数字