本文共 864 字，大约阅读时间需要 2 分钟。

4. flex实战项目音乐播放器

1.你可以让整个包含体作为Flex容器（下图中被包含在红色边框内的部分），并把布局的其它部分分成Flex项目（Item 1 和 Item 2）

注：你知道Flex项目也可以成为Flex容器吗？是的，是可能的！你想嵌套多深就嵌套多深（不过理智的做法是保持一个合理的水平）

Item 1（第一个Flex项目）也可以弄成一个Flex容器。然后，侧边栏（Item 1b）和主栏目（Item 1a）就成了 Item 1 的Flex项目

看看上面的主栏目（Item 1a）。它也可以变成一个Flex容器，以容纳如下高亮度的部分：Item 1a — A 和 Item 1a — B

2.内容和底栏的HTML&CSS

让脚注吸附在底部。让放音乐控制的脚注吸附在页面的底部，同时让主栏目填满剩余空间。。。要怎么实现？？

这里设置为auto是让其根据内容决定高度，flow-grow让主栏目充满整个空间，将flex-shrink设置为0是因为在有些浏览器中会有一个 bug，允许Flex项目收缩后比其内容尺寸小。这是个很古怪的行为，解决办法就是将flex-shrink 的属性值设置为 0，而不是默认值 1，同时，把 flex-basis 属性设置为 auto

这样一来因为是相对flex，所以其宽高度根据其内容决定

3.侧边栏HTML&CSS:

正如之前解释过的，上面的 main 部分也会成为一个Flex容器。侧边栏（用 aside 标记表示） 以及 section 会成为Flex项目

现在，主栏目是一个Flex容器了。下面我们来处理它的Flex项目之一，侧边栏。跟让脚注吸附到页面底部一样，你还会想让侧边栏吸附到页面的左边

5. 关于响应式的设计

我们现在想设计一个flex的导航栏

如果你想在移动设备上垂直堆放，那就需要请媒体查询等登堂入室了

注:现在就可以把Flex纳入你的知识库了，再结合媒体查询那就更加完美了，学习就是一个这样将新学到的东西不断和原来的东西进行一个结合，从而扩充自己知识库的一个过程