css flexbox模型_5分钟内学习CSS Flexbox-初学者教程

css flexbox模型

快速介绍流行的布局模块 (A quick introduction to the popular layout module)

In this post, you’ll learn the basics of CSS Flexbox, which has become a must-have skill for web developers and designers in the last couple of years.

在本文中，您将学习CSS Flexbox的基础知识，在过去的两年中，它已成为Web开发人员和设计人员的必备技能。

We’ll be using a navbar as an example, as this is a very typical use case for Flexbox. This will introduce you to its most-used properties of the module while leaving out the ones which aren’t as critical.

我们将以导航栏为例，因为这是Flexbox的一个非常典型的用例。 这将向您介绍其最常用的模块属性，而忽略那些不太重要的属性。

I’ve also created a free 12-part course on Flexbox. Check it out here if you’re interested!

我还在Flexbox上创建了免费的12部分课程。 如果您有兴趣， 请在这里查看 ！

Now let’s get started!

现在开始吧！

您的第一个Flexbox布局 (Your first Flexbox layout)

The two main components of a Flexbox layout are the container and the items.

Flexbox布局的两个主要组件是容器和项目 。

Here’s the HTML for our example, which contains a container with three items:

这是我们示例HTML，其中包含一个包含三个项目的容器：

<nav class="container">  <div>Home</div>  <div>Search</div>  <div>Logout</div>  
</nav>

Before we turn this into a Flexbox layout, the  elements will be stacked on top of each other like this:

在将其转换为Flexbox布局之前，元素将像这样相互堆叠：

I’ve added a little bit of styling, but that has nothing to do with Flexbox.

我添加了一些样式，但这与Flexbox无关。

To turn this into a Flexbox layout, we’ll simply give the container the following CSS property:

要将其转换为Flexbox布局，我们只需为容器提供以下CSS属性：

.container {  display: flex;  
}

This will automatically position the items nicely along the horizontal axis.

这将自动沿水平轴很好地定位项目。

If you want to check out the actual code, you can head over to this Scrimba playground.

如果您想查看实际代码，可以前往此Scrimba游乐场。

Now let’s shuffle these items around a bit.

现在，让我们对这些项目进行一些调整。

对齐内容并对齐项目 (Justify content and Align items)

Justify-content and align-items are two CSS properties which help us distribute the items in the container. They control how the items are positioned along the main axis and cross axis.

Justify-content和align-items是两个CSS属性，可帮助我们在容器中分发项目。 它们控制物品沿主轴和横轴的放置方式。

In our case (but not always) the main axis is horizontal and the cross axis is vertical:

在我们的情况下(但并非总是如此)，主轴是水平的，而交叉轴是垂直的：

In this article, we’ll only look at justify-content, as I’ve found to be using this one much more than align-items. However, in my Flexbox course, I explain both properties in detail.

在本文中，我们将仅讨论justify-content ，因为我发现它比align-items使用得多。 但是，在我的Flexbox课程中 ，我将详细解释这两个属性。

Let’s center all the items along the main axis by using justify-content:

让我们使用justify-content沿主轴将所有项居中：

.container {  display: flex;  justify-content: center;  
}

Or we can set it to space-between, which will add space between the items, like this:

或者我们可以将其设置为space-between ，这将在项目之间添加空间，如下所示：

.container {  display: flex;  justify-content: space-between;  
}

Here are the values you can set for justify-content:

这是您可以为justify-content:设置的值justify-content:

• flex-start (default)

  flex-start( 默认 )

• flex-end
  柔性端
• center
  中央
• space-between
  间隔
• space-around
  周围空间
• space-evenly
  空间均匀

I’d recommend you to play around with these and see how they play out on the page. That should give you a proper understanding of the concept.

我建议您试用这些内容，并在页面上查看它们的显示方式。 那应该使您对该概念有适当的了解。

控制单个项目 (Controlling a single item)

We can also control single items. Let’s say we, for example, want to keep the first two items on the left side, but move the logout button to the right side.

我们还可以控制单个项目 。 假设我们想将前两个项目保留在左侧，但是将logout按钮移到右侧。

To do this we’ll use the good old technique of setting the margin to auto.

为此，我们将使用将边距设置为auto旧技术。

.logout {  margin-left: auto;  
}

If we’d want both the search item and the logout item to be pushed to the right-hand side, we’ll simply add the margin-left to the search item instead.

如果我们希望将search项和logout项都推到右侧，则只需在search项中添加margin-left即可。

.search {  margin-left: auto;  
}

It’ll push the search item as far to the right-hand side as possible, which again will push the log out item with it:

它将搜索项目尽可能地推到右侧，再次将注销项目推到右边：

flex属性 (The flex property)

So far, we’ve only had fixed-width items. But what if we want them to be responsive? To achieve that we have a property called flex. It makes it a lot easier than the old way of using percentages.

到目前为止，我们只有固定宽度的项目。 但是，如果我们希望他们做出回应，该怎么办？ 为此，我们有一个称为flex的属性。 与使用百分比的旧方法相比，它要容易得多。

We’ll simply target all the items and give them a flex value of 1.

我们将简单地定位所有项目并将其flex值赋予1 。

.container > div {  flex: 1;  
}

As you can see, it stretches the items to fill the entire container.

如您所见，它会拉伸项目以填充整个容器。

In many cases, you’d probably want one of the items to take up the extra width, and thereby only set one of them to have flexible width. We can, for example, make the search item take up all the extra space:

在许多情况下，您可能希望其中一项占用额外的宽度，从而仅将其中一项设置为具有灵活的宽度。 例如，我们可以使search项占用所有额外的空间：

.search {  flex: 1;  
}

Before we end this article, I want to mention that the flex property is actually a shorthand three properties: flex-grow, flex-shrink and flex-basis. However, learning those takes more than five minutes, so it’s outside of the scope of this tutorial.

在结束本文之前，我想提到一下flex属性实际上是三个属性的简写形式： flex-grow ， flex-shrink和flex-basis 。 但是，学习这些内容需要五分钟以上的时间，因此超出了本教程的范围。

If you’re interested in learning them, though, I’m explaining all three properties thoroughly in my free Flexbox course.

但是，如果您有兴趣学习它们，我将在我的免费Flexbox课程中全面解释这三个属性。

Now that you’ve learned the basics you’ll definitely be ready to take my full-length course and become a Flexbox master!

现在，您已经学习了基础知识，您一定会准备参加我的全长课程并成为Flexbox的高手！

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/learn-css-flexbox-in-5-minutes-b941f0affc34/

css flexbox模型