css flexbox模型_在此免费的交互式教程中学习CSS Flexbox

css flexbox模型

After the success of the CSS Grid course I launched with freeCodeCamp in December (over 14,000 students so far!), I decided to launch a second free course.

在12月我成功使用freeCodeCamp 启动CSS Grid课程之后 (到目前为止已有14,000名学生！)，我决定开设第二个免费课程。

This time you can learn Flexbox, which has become a must-have skill for front-end developers.

这次您可以学习Flexbox，它已成为前端开发人员的必备技能。

Flexbox was also one of the most frequent requests I got from students who took the CSS Grid course.

Flexbox也是我上CSS Grid课程的学生最常提出的请求之一。

In this article, I’ll explain how the Flexbox course is laid out so that you can decide whether it’s a good fit for you.

在本文中，我将解释Flexbox课程的布局方式，以便您可以决定它是否适合您。

But if you want to jump straight into the course immediately, you can just go there directly and get started.

但是，如果您想立即直接进入课程，则可以直接去那里开始 。

Update: I’ve also launched a free CSS Variables course here.

更新：我还在这里启动了免费的CSS变量课程。

我的Flexbox课程涵盖了什么 (What my Flexbox course covers)

The course consists of twelve interactive screencasts, which take you from beginner to advanced. It’s focused on giving you relevant skills as early as possible, meaning that I’ve prioritized the properties based on how useful I think they are in a real-world setting.

该课程包括十二个交互式截屏视频，从入门到高级。 它着重于尽早地为您提供相关技能，这意味着我已根据我认为它们在现实环境中的有用程度对属性进行了优先排序。

So if you only work through the five first, you’ll still learn new concepts you can start using in your projects. This said, I still recommend working through the whole thing.

因此，如果仅完成前五个部分，您仍将学习可以在项目中开始使用的新概念。 这就是说，我仍然建议您贯穿整个过程。

Throughout the course, you’ll be building and experimenting with a navbar, since this is a very typical use case for Flexbox.

在整个课程中，您将构建和尝试导航栏，因为这是Flexbox的一个非常典型的用例。

Let’s have a look at each of the screencasts:

让我们看一下每个截屏视频：

第1课：您的第一个Flexbox (Lesson 1: Your first Flexbox)

You’ll start off by creating a simple layout. This will teach you the concept of a flex container and flex items, the two core ingredients of a Flexbox layout.

您将从创建一个简单的布局开始。 这将教您Flex 容器和flex 物品的概念，这是Flexbox布局的两个核心要素。

第2课：主轴和十字轴 (Lesson 2: Main axis and cross axis)

In the second screencast, I explain a core concept of Flexbox that’s critical to understand early on: axes. A Flexbox layout has two axes: the main axis and the cross axis. By default, the main axis is horizontal and the cross axis vertical, but they can also flip roles.

在第二个屏幕录像中，我解释了Flexbox的核心概念，这对于早期理解至关重要：轴。 Flexbox布局有两个轴：主轴和交叉轴。 默认情况下，主轴是水平的，而横轴是垂直的，但是它们也可以翻转角色。

第3课：如何证明内容合理 (Lesson 3: How to justify content)

The justify-content property controls the content along the main axis. Throughout the course, your main axis will be mostly horizontal, as opposed to vertical. I’ve chosen to do it this way as I’ve found horizontal Flexbox layouts to be more common than vertical ones in real life.

justify-content属性控制主轴上的内容。 在整个过程中，您的主轴大部分将是水平的，而不是垂直的。 我之所以选择这样做，是因为在现实生活中，水平Flexbox布局比垂直布局更常见。

第4课：如何放置单个项目 (Lesson 4: How to position single items)

In this lesson, you’ll learn how to position single items using the good old technique of setting the margin to auto.

在本课程中，您将学习如何使用将页margin设置为自动的良好旧技术来定位单个项目。

第5课：flex属性 (Lesson 5: The flex property)

The flex property allows you to give your items responsive widths. It’s actually a shorthand for three other properties: flex-grow, flex-shrink and flex-basis. But we’ll save those for the end of the course, as they’re more advanced.

flex属性允许您为项目提供响应宽度。 实际上，它是其他三个属性的简写： flex-grow ， flex-shrink和flex-basis 。 但是，随着它们的更高级，我们将在课程结束时将其保存。

第6课：如何对齐项目 (Lesson 6: How to align items)

The align-items property controls the items along the cross axis, which in our case is vertical. In the image above, we’ve centred the items along this axis.

align-items属性控制沿横轴的项目，在本例中为横轴。 在上图中，我们已将项目沿此轴居中。

第7课：Flex方向列 (Lesson 7: Flex direction column)

Setting the flex-direction to the column will flip the main axis and cross axis, so that the items are laid our downwards as opposed to sideways.

将flex-direction设置为列将使主轴和横轴翻转，从而使项目向下放置，而不是侧向放置。

第八课：包装 (Lesson 8: Wrapping)

By default, Flexbox won’t allow you to wrap your items, meaning they’ll stay on a single line or a row. If you set flex-wrap to wrap you’ll be able to, though. I’ll show how this would play out.

默认情况下，Flexbox不允许您包装商品，这意味着它们将停留在一行或一行上。 但是，如果将flex-wrap设置flex-wrap ，则可以。 我将说明如何进行。

第9课：弹性增长，收缩和基础 (Lesson 9: Flex grow, shrink, and basis)

Flex grow, shrink, and basis are a bit complex to understand, so this is the longest screencast in the course. In short, flex-basis sets the base width of the item, flex-grow controls how it’ll grow above it’s basis width, and flex-shrink controls how it’ll shrink when the item is narrower than its base width.

Flex的增长，收缩和基础很难理解，因此这是课程中最长的截屏视频。 简而言之， flex-basis设置项目的基本宽度， flex-grow控制其在基本宽度之上的增长方式， flex-shrink控制当项目比其基础宽度窄时如何收缩。

第10课：订购 (Lesson 10: Order)

We’ll end the course with a lecture on the order property. This will introduce you to source order independence, which allows you to set the order of the items independently of how they’re laid out in the HTML.

我们将以关于order属性的讲座结束本课程。 这将向您介绍源顺序独立性 ，它使您可以独立于HTML中的项目布置方式来设置项目的顺序。

奖金部分 (Bonus section)

In the bonus section, you’ll create two real-world layouts from beginning to end.

在红利部分，您将从头到尾创建两个实际布局。

In the first one, you’ll take everything you’ve learned through the course and use it to create a navbar which adapts itself to various screen sizes.

在第一个教程中，您将学习本课程学到的所有知识，并使用它来创建一个导航栏，该导航栏可适应各种屏幕尺寸。

In the second bonus lecture, you’ll experiment with creating an image grid with Flexbox. If you’ve taken my CSS Grid course, you’ll recognize the setup from there:

在第二个奖励讲座中，您将尝试使用Flexbox创建图像网格。 如果您修完了我CSS Grid课程，您将从那里识别设置：

And that’s all.

就这样。

Scrimba格式 (The Scrimba format)

Let’s also finally look at the technology behind the course. It’s built using Scrimba, an interactive coding screencast tool which has been built by my two awesome co-founders Sindre and Magnus.

最后，让我们再来看一下本课程的技术。 它是使用Scrimba构建的，Scrimba是一种交互式编码截屏工具，由我的两位杰出联合创始人Sindre和Magnus构建。

Scrimba screencasts look like normal videos, but they’re fully interactive. You can edit the code inside the casts.

Scrimba截屏视频看起来像普通视频，但它们是完全互动的。 您可以在演员表中编辑代码。

Here’s a gif which explains the concept:

这是解释概念的gif：

Pause the screencast → Edit the code → Run it! → See your changes

暂停截屏→编辑代码→运行它！ →查看您的更改

This is great for when you feel you need to experiment with the code in order to properly understand it, or when you simply want to copy a piece of the code.

当您觉得需要试验代码以正确理解它时，或者只想复制一段代码时，这非常有用。

Also, because Scrimba screencasts happen in a code editor, they only take up about 1% of the bandwidth that a normal video would. This means Scrimba screencasts are much easier to stream — even when your internet connection is slow.

此外，由于Scrimba截屏视频是在代码编辑器中进行的，因此它们仅占用普通视频带宽的大约1％。 这意味着Scrimba截屏视频更容易流播，即使您的Internet连接速度很慢也是如此。

I hope you enjoy the course. If you have any feedback or requests for more screencasts to add, feel free to let me know on Twitter and I’d be happy to consider it.

希望您喜欢这个课程。 如果您有任何反馈或要求添加更多截屏视频，请随时在Twitter上告诉我 ，我很乐意考虑。

Happy coding!

编码愉快！

---

---

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

谢谢阅读！ 我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。 如果要学习以专业水平构建现代网站，则应查看我们的响应式Web设计新手训练营 。

翻译自: https://www.freecodecamp.org/news/i-just-launched-a-free-full-length-flexbox-course-where-you-can-build-projects-interactively-1860e3d3c4af/

css flexbox模型