打开 index.html ... 在这里先添加一个容器 ... 用一个 div .. 上面可以添加一个 css 类，比如 container .. 这个容器一会儿我们让它作为 Flex 容器 ..

div.container

容器里包装的东西是一些 flex 项目 .. 用一个 div .. 上面加上 item 这个类 .. 这些类的名字你可以随便定义 .. 再加上一个带数字的 item 类 .. 这里的 $ 符号会变成数字 ..

需要 5 个这样的项目 .. 项目里面添加一个数字 .. 数字的周围可以使用一个 span 标签包装一下 .. 它里面的内容就是一些数字 ..

div.item.item-$*5>span{ $ }

在这个 basic.css 样式表里，我提前添加一点样式 .. 主要就是设置了一下容器与项目容器的背景 .. 在项目上还有一点阴影的效果..

我们可以把自己的样式放在 style.css 这个样式表里 ..

现在 container 里面的项目都会堆叠在一起显示 .. 下面我们可以在这个 container 上面添加点跟 flexbox 的 flex 容器相关的样式 .. .container .. 用一个 display 属性 .. 设置成 flex ..

你会看到，这个容器里面的项目会水平显示 .. 设置了容器的 display: flex 以后，它里面的项目会自动变成 flex 项目。

另外我们也可以使用 inline-flex .. 前面加上一个 inline .. 这个容器会变成一个行内容器，所以它的宽度就会是它里面的内容的宽度 .. 这里我们还是改回成 flex ...