现在每个网站都需要适应移动装置。您可以通过使用响应技术来实现这一点，其中一个就需要 CSS flexbox 功能。

　　Flexbox 允许您将布局元素定义为可以根据容器进行调整的灵活框。因此，您可以决定某个元素应占用多少空间，调整容器大小时应移动的位置以及如何相应地安排该内容。
 
　　如果 WooCommerce 网站开发中您从未使用过 flexbox 属性，那么它可能会让您感到困惑。此列表可帮助您了解所有主要的 flexbox 方法。从那里，您将能够在您自己的专案中实现这种强大的布局功能。
 
　　Flexbox Froggy

　　我认为这对于那些想要弄脏自己的初学者来说是最好的教程。 Flexbox Froggy 是一款免费的开源编码游戏，您可以在其中学习 flexbox … froggy 的方法。
 
　　您可以在各个层面上进步 – 前几个很容易。他们介绍了 flexbox 的绝对基础知识，并教您基本的属性。从那里开始，您将经历 30 多个级别，这些级别变得越来越困难，并将推动您的知识极限。
 
　　即使对于想要回顾一下 flexbox 可以做什么的有经验的开发人员来说，这个工具也很棒。如果您需要更具挑战性的工作，可以跳到后面的课程，因此它非常适合所有开发人员。
 
　　什么是 Flexbox

　　什么是 Flexbox？可能听起来像一个奇怪的琐事游戏节目，但它实际上是一个很好的学习方式。这是由开发人员 Wes Bos 开发的一套免费视频课程。
 
　　他将向您介绍与 Flexbox 属性相关的所有内容，包括调整容器大小以及如何从头开始建立完全响应的界面。视频需要注册电子邮件地址，但课程完全是免费的。最好的部分是这些视频教授您可以遵循的实际例子来学习，比如之前分享的《10 个用于查询自由纹理的资源》。但我仍然认为最好的学习方法之一就是建立真正的专案，而这个课程就是这样做的。
 
　　CSS 技巧指南

　　如果您更喜欢书面教程，那么请看一下这个 CSS-Tricks 指南。从 Flexbox 的绝对基础知识开始，它涵盖了您需要了解的所有内容。
 
　　在解释 flexbox 术语，布局和内容组织的过程中，您会发现大量的视觉效果。它不是世界上最好的指南，但对于只想阅读和学习的初学者来说，它可能是最好的。它比大多数 W3 规范文件更容易使用，并且作为一个很好的起点。
 
　　Flexbox Intro Tut

　　我也非常热衷于为 Interneting Is Hard 网站撰写的本教程。这是一个致力于线上 WooCommerce 网站开发教程的网站，其目标是帮助每个人理解编码。
 
　　每章都有漂亮的图表，解释了在学习 HTML 和 CSS 时遇到的语法和术语。而且我不得不说他们的 flexbox 内容太棒了。
 
　　该指南绝对庞大，超过 12 章组织在一个页面上。本教程使用目录，这很快成为冗长文章的标准。绝对长度可能会让您一开始拒绝 – 但它真的值得一读。
 
　　CSS3 Flexbox 的可视指南

　　图形和视觉效果总能比文字更好地解释。这就是为什么 Scotch.io 的这本指南是研究 flexbox 的更好的入门教程之一。
 
　　请注意，这确实使用了大量代码片段来解释概念，因此它不仅仅是一个视觉化指南。但是还有很多图形和图表可供使用。
 
　　如果您想要一个明确的 flexbox 技术指南，那么您真的会很喜欢 Scotch 指南。它确实更倾向于开发人员，所以如果您已经熟悉 CSS 语法，它确实很有用。
 
　　Flexbox CSS 在 20 分钟内完成

　　我知道很多人通过观看视频来学习更好，而且您可以在 YouTube 上找到很多。当然，上面的 Wes Bos 视频系列也是一个很好的选择。但是如果您想要快速的东西，可以通过 Traversy Media 检视这个视频。
 
　　它只需 20 分钟即可完美地解释 flexbox 语法。您将更加深入地了解为什么灵活的盒子模型可以如此轻松地替换浮动，以及为什么开发人员对这种新设置非常了解。
 
　　使用 Flexbox 构建简单布局

 
　　为了进入更实用的视频示例，您可能会喜欢开发人员 Kevin Powell 录制的视频教程。
 
　　这是一段相当短的视频，总共只有 11 分钟。但在解释灵活的盒子模型时，它也最直观和更直接的。
 
　　如果您想要一个可以轻松跟随的视频，那么这值得关注。您不会了解有关 flexbox 的所有内容，但您将学到足够的知识来使用它来进行自定义 Web 布局。
 
　　使用 FlexBox 重建 Dribbble

　　这可能是我最喜欢的视频教程之一，因为它教会您如何从头开始建立一个完整的专案。
 
　　YouTube 频道 DevTips 建立了这个 Dribbble 编码教程，向您展示如何使用 CSS flexbox 重建整个 Dribbble 布局。对于想要真正深入了解并了解其工作原理的初学者，这是我推荐的精确教程类型。
 
　　记住 CSS 属性非常棒并且会有所帮助。但是通过这种教程，您将学习如何从头开始编写布局的实用技巧。这就是您可以为每个未来专案带来的体验。
 
　　扁平响应 Flexbox 站点

　　我的最后一个选择是冗长的教程，它也很好地涵盖了 flexbox 。在这个视频中，您将找到一个多小时的指导性指导，用于从头开始使用 flexbox 构建自定义网站。您将学习如何编写网格代码以及如何设计整个页面以实现移动友好。
 
　　但是，这比其他视频教程要详细得多。因此，我真的建议您可以稍后观看此视频，一旦您了解了这些基础知识。您将知道它涵盖了很多 CSS flexbox 属性的基础知识，但它也会很快的移动。
 
　　无论使用哪种方式，这个列表有很多让您能够忙碌的东西，并会让您开始使用 flexbox 布局。