Flexbox简介

Flexbox允许您将布局元素定义为可以根据容器进行调整的灵活框。所以呢，您可以决定某个元素应占用多少空间，调整容器大小时应移动的位置以及如何相应地安排该内容这个。

如果网站开发中您从未使用过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网站撰写的本教程。这是一个致力于在线网站开发教程的网站，其目标是帮助每个人理解编码。

每章都有漂亮的图表，解释了在学习HTML和CSS时遇到的语法和术语。而且我不得不说他们的flexbox内容太棒了。

该指南绝对庞大，超过12章组织在一个页面上。本教程使用目录，这很快成为冗长文章的标准。绝对长度可能会让你一开始拒绝 - 但它真的值得一读。

CSS3 Flexbox的可视指南

图形和视觉效果总能比文字更好地解释。这就是为什么的这本指南是研究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布局。