任务十：Flexbox 布局练习

任务目的

• 学习如何flex进行布局，学习如何根据屏幕宽度调整布局策略。

 

任务描述

• 需要实现的效果如效果图（点击打开）所示，调整浏览器宽度查看响应式效果，红色的文字是说明，不需要写在 HTML 中。

 

任务注意事项

• 只需要完成HTML，CSS代码编写，不需要写JavaScript
• 屏幕宽度小于 640px 时，调整 Flexbox 的属性以实现第四个元素移动到最前面的效果，而不要改动第一个元素的边框颜色与高度实现效果图。
• 思考 Flexbox 布局和网格布局的异同，以及分别适用于什么样的场景。可以搜索一下别人的结论，不过要保持思辨的态度，不可直接接受别人的观点。
• HTML 及 CSS 代码结构清晰、规范

 

 

任务完成及总结：

flex布局难度倒是不大，看一些相关的文档就能明白个一二，在这里很厚脸皮的贴上自己整理的文档。

 

虽然自己一开始实现思路是正确的，然而很多方面没有考虑到，比如兼容性、页面美观和代码的简洁性，糟糕案例查看请戳这里。

 

后来经过一系列的修改，倒也是有些小完美了，请戳这里查看详情。