css 相同的css属性_您只需要了解这些属性即可开始喜欢CSS

css 相同的css属性

by Henry Tabima Giraldo

亨利·塔比马·吉拉尔多

您只需要了解这些属性即可开始喜欢CSS (You just need to know these properties to start loving CSS)

Positioning things with HTML and CSS can be a real headache when you’re new in frontend development. But in this post, I’m going to teach you how to solve most of the positioning problems. You only have to know these 3 CSS properties.

当您是前端开发的新手时，使用HTML和CSS定位内容可能会非常麻烦。 但是在这篇文章中，我将教您如何解决大多数定位问题。 您只需要知道这3个CSS属性。

I’m a developer with 3+ years of experience doing frontend. When I was learning, I thought what you’re thinking right now. Then I met flexbox, and positioning became easier than ever.

我是一位拥有3年以上前端开发经验的开发人员。 当我学习时，我以为你现在在想什么。 然后我遇到了flexbox，定位比以往任何时候都容易。

One of the best resources for learning flexbox is the CSS Tricks guide. After continued use of this feature, I realized that, in most cases, you only need these three properties:

CSS技巧指南是学习flexbox的最佳资源之一。 继续使用此功能后，我意识到在大多数情况下，您仅需要以下三个属性：

display: flex;

显示：flex;

justify-content: $value;

证明内容：$ value;

align-items: $value;

align-items：$ value;

I’m going to borrow some images from the above-mentioned guide. This way, I can make sure it’s easier for you to understand how properties work. Alright, let’s start.

我将从上述指南中借用一些图像。 这样，我可以确保您更轻松地了解属性的工作方式。 好吧，让我们开始吧。

语境 (Context)

First of all, we need to set up a working context. When we are working with flexbox we have two kinds of elements, the container, and the items inside said container, as you can see in the images below:

首先，我们需要建立一个工作环境。 当我们使用flexbox时，我们有两种元素， container和容器中的项目，如下图所示：

Now that you can differentiate between the container and its items, let’s make one thing clear: the three properties we are going to learn here belong to the container. A common mistake people make when they start with flexbox, is to set the following properties to their child elements.

现在您可以区分容器及其项目了，让我们澄清一件事：我们将在此处学习的三个属性属于container 。 人们从flexbox开始时常犯的一个常见错误是将以下属性设置为其子元素。

显示：flex (display: flex)

Alright, the first thing we need to do is set the display property of the container to flex.

好吧，我们需要做的第一件事就是将容器的display属性设置为flex 。

With this property, you arrange the direct child elements of the container in a row (like in the images above).

使用此属性，您可以将容器的直接子元素排成一行(如上图所示)。

证明内容 (justify-content)

This property defines the alignment of the items along the main axis (horizontal axis). We can see the possible values and their results in the image below:

此属性定义项目沿主轴(水平轴)的对齐方式。 我们可以在下图中看到可能的值及其结果：

对齐项目 (align-items)

The third property is align-items. This property defines the default behaviour for the items along the cross axis (vertical axis). Now, let us see all the possible values this property has, and how they affect the elements inside the container.

第三个属性是align-items。 此属性定义了沿交叉轴(垂直轴)的项目的默认行为。 现在，让我们看看该属性具有的所有可能值，以及它们如何影响容器内的元素。

With the previous properties, we were able to start positioning things right where we want them. But this post wouldn’t be complete without examples. For that reason, I’m going to show you some common use cases.

使用先前的属性，我们能够开始将事物放置在所需的位置。 但是，没有示例，这篇文章是不完整的。 因此，我将向您展示一些常见的用例。

Note: There is a property called flex-direction that swaps the direction of the main axis and the cross axis. Be aware when you’re using this property, and make sure you know what you’re doing.

注意：有一个名为flex-direction的属性，可以交换主轴和交叉轴的方向。 请注意何时使用此属性，并确保您知道自己在做什么。

用例 (Use Cases)

As the first use case, we are going to see a simplified header navigation bar. Headers usually have an item on the left, another one on the right and sometimes one or more in the middle.

作为第一个用例，我们将看到一个简化的标题导航栏。 标头通常在左侧有一个项目，在右侧有另一个，有时在中间有一个或多个。

In this Codepen example, focus only on the CSS inside the selector called .container. All other styles are for giving a good look and feel. You should try experimenting with removing the item in the middle and then seeing what happens.

在此Codepen示例中，仅专注于名为.container的选择器内CSS。 其他所有样式均具有良好的外观和感觉。 您应该尝试尝试从中间移除项目，然后看看会发生什么。

For the second use case, generally, you would want to centre an item inside its container. Now let’s see how we can accomplish that.

通常，对于第二个用例，您需要将一个项目放在其容器的中心。 现在让我们看看如何实现这一目标。

Again, check for the selector called .container and play around with the different values of those properties and see what happens.

再次，检查名为.container的选择器，并.container使用这些属性的不同值，然后看看会发生什么。

最后 (Finally)

Easy right? play around with these properties and see how they affect the elements, get used to them, and you will no longer have any problems while working with positioning.

容易吧？ 尝试这些属性，看看它们如何影响元素，习惯它们，并且在定位时您将不再有任何问题。

Now that you have seen how to use flexbox in the most basic and useful way, I want to encourage you to learn more about this feature. You can read the CSS tricks guide, and play around with Flexbox frogs or Flexbox Zombies. Those last two options can be an entertaining way to teach yourself the ins and outs of flexbox.

既然您已经了解了如何以最基本，最有用的方式使用flexbox，那么我想鼓励您进一步了解此功能。 您可以阅读CSS技巧指南 ，并试用Flexbox青蛙或Flexbox Zombies 。 最后两个选项可以作为一种有趣的方式来教您Flexbox的来龙去脉。

I hope this post helps you along your path. And I would love to hear from you; if you want to reach out, make sure you follow me on Twitter as @HenryTabimaG and on GitHub as @HenryTabima. If you want any specific content for a post, feel free to ask.

希望这篇文章对您的发展有所帮助。 我很想听到你的消息； 如果您想联系我们，请确保在Twitter上以@HenryTabimaG的身份关注我，在GitHub上以@HenryTabima的 身份关注我。 如果您要发布任何特定内容，请随时提问。

Remember, if you liked this post leave some “claps”.

请记住，如果您喜欢这篇文章，请留下一些“拍手”。

翻译自: https://www.freecodecamp.org/news/you-just-need-to-know-these-properties-to-start-loving-css-a06aca6087e9/

css 相同的css属性