-ms-flexbox

by Kyle Gallagher

凯尔·加拉格尔(Kyle Gallagher)

Flexbox中width和flex-basis之间的区别 (The difference between width and flex-basis in Flexbox)

了解奇怪的部分 (Understanding the weird parts)

When I first started learning Flexbox, the thing that struck me curious the most was “Why did they add this flex-basis in?” I mean, I have width…Why is there also a flex-basis?

当我刚开始学习Flexbox时，最令我惊讶的是“他们为什么要在其中添加这个flex-basis？” 我的意思是，我有宽度...为什么还需要伸缩底座？

“动态约束” (“Dynamic Constraint”)

I read multiple articles on the topic. All of which claimed some difference between width and flex-basis. None of which fully explained what the difference was supposed to be, though.

我阅读了有关该主题的多篇文章。 所有这些都声称宽度和柔韧性基础之间存在一些差异。 但是，这些都没有一个能完全说明差异是什么。

After a lot of experimentation and some good o’l fashion fiddling, I came to the conclusion that the primary purpose of flex-basis was to provide a “dynamic” constraint. What exactly do I mean by that, though? A “dynamic” constraint.

经过大量的试验和一些很好的时尚修饰，我得出的结论是，柔韧性基础的主要目的是提供“动态”约束。 我到底是什么意思呢？ “动态”约束。

I am making the assumption that you are already familiar or at least generally acquainted with CSS and Flexbox.

我假设您已经熟悉或至少大致熟悉CSS和Flexbox。

I will not be going deeply into any details about CSS or Flexbox that will teach you the core concepts of either of them.

我不会深入介绍CSS或Flexbox的任何细节，这些细节将教您这两种方法的核心概念。

需要知道的 (Need to know’s)

I will also be utilizing SCSS, not native CSS, and the “ Block-Element-Modifier (BEM)” method. The reason for this is that I believe it is easier to be concise this way. So you will need to understand the basics of SCSS and nesting, BEM should be self descriptive in the examples.

我还将利用SCSS，而不是本机CSS，以及“块元素修饰符(BEM)”方法。 这样做的原因是，我认为以这种方式来简化更为容易。 因此，您将需要了解SCSS和嵌套的基础，BEM在示例中应具有自描述性。

The goal of this article is to simplify the enigma that seems to exist on the internet relating to flex-basis. I have often seen the response “you use flex-basis instead of width” as an answer to its purpose. Of course, this is totally acceptable for most cases, although it is possible to use it in more advanced ways. It seems that the potential of flex-basis has eluded many for some time now (of course not all) but I dare say many.

本文的目的是简化Internet上似乎存在的与flex-basis相关的谜。 我经常看到“您使用flex-basis而不是width”作为其目的的答案。 当然，尽管可以以更高级的方式使用它，但在大多数情况下这是完全可以接受的。 似乎有一段时间，flex-basis的潜力已经消失了很多(当然不是全部)，但我敢说很多 。

I want to try to convince you in this article, that Flexbox’s flex-basis is not a replacement for width (or height). It is a whole new tool entirely with its own set of possibilities.

我想在本文中说服您，Flexbox的flex-basis 不能替代width(或height) 。 它是一种全新的工具，完全具有自己的可能性。

肉和土豆 (The Meat and Potatoes)

So now I have said these things… The next part is to explain and show exactly what I am talking about here. As you may know, when working with flex-box, you can use flex-basis in place of width.

因此，现在我已经说了这些话……下一部分将解释并确切显示我在这里所说的内容。 如您所知，在使用flex-box时，可以使用flex-basis代替width。

视觉例子 (Visual examples)

In the above example, we have an “inner” element that will live inside the outer “element”. The outer element is our Flexbox and the inner has a flex-basis of 400px.

在上面的示例中，我们有一个“内部”元素，该元素将位于外部“元素”内部。 外部元素是我们的Flexbox，内部元素的flex-basis为400px。

The HTML for the above could look something like this:

上面HTML可能看起来像这样：

Resulting in a grey box that is exactly 400px wide by 250px tall in the center of our screen like so:

在屏幕中央产生一个灰色框，该框正好宽400px x高250px，如下所示：

In the above example, our wrapper .element, auto defaults to a flex-direction that is row (left to right) and not column (top to bottom). Remember that. Soon we will change that to column and you will get to see what this whole article is all about. That dynamic nature of Flexbox’s flex-basis.

在上面的示例中，我们的包装器.element ，auto默认为行(从左到右)而不是列(从上到下)的伸缩方向。 记住这一点。 不久，我们将其更改为专栏，您将看到整篇文章的全部内容。 Flexbox的flex-basis的动态特性。

让我们变得“动态” (Lets get “dynamic”)

So let’s change the code to show that “dynamic nature”. To do this, all we need to do is change the outer element to have a (flex-direction: column) and change the height to width on the inner element (html does not change).

因此，让我们更改代码以显示“动态性质”。 为此，我们要做的就是将外部元素更改为( flex-direction：column )并将内部元素的高度更改为width (html不变)。

Changing the flex-direction changes the direction that flex-basis will effect. So effectively flex-basis is both width and height. In the example above, flex-basis will now result in the block being 400px tall vs the 400px wide rectangle we saw before.

更改屈曲方向会更改屈曲基础的作用方向。 因此有效的flex-basis是宽度和高度。 在上面的示例中，flex-basis现在将导致块高400像素，而我们之前看到的是400像素宽的矩形。

If you want to play with this code yourself, here is a codepen with the above code in it.

如果您想自己玩此代码，请在这里找到上面的代码。

观察 (Observation)

Notice how in the first example, flex-basis is taking over the role of width, and in the second example, the role of height. Flex-basis is both width and height in a Flexbox, depending on the flex direction. Pretty cool!

请注意，在第一个示例中，flex-basis是如何接管width的角色，在第二个示例中，是height的角色。 Flex-basis是Flexbox中的宽度和高度，具体取决于弯曲方向。 太酷了！

加深了解/最佳做法 (Deeper understanding / Best practices)

Here are some of the most important things I have learned about flex-basis during my use of Flexbox’s flex-basis.

这是我在使用Flexbox的flex-basis时学到的关于flex-basis的一些最重要的信息。

• Flex-basis controls either “width” or “height” based on the flex-direction弹性基础可根据弹性方向控制“宽度”或“高度”

• Flex-basis will override any other width: or height: properties if specifically declared anything other than flex-basis: auto (auto by default)

  如果专门声明了除flex-basis： auto (默认为auto)以外的任何内容，则flex-basis将覆盖任何其他width：或height：属性。

• The shorthand for flex basis is (flex: $grow, $shrink, $size) and is set to (flex: 0 1 auto) by default.

  flex基础的简写是(flex：$ grow，$ shrink，$ size)并默认设置为(flex：0 1 auto )。

• When flex basis is set to auto, it first checks for a width or height property (based on direction) if none, it uses the elements content sizing

  当flex base设置为auto时 ，它首先检查width或height属性(基于方向)( 如果没有) ，则使用元素的内容大小

• Flex-basis will still obey any min / max-width: or height settings. Again, it is based on the flex-direction:

  Flex-basis仍将遵守任何最小 / 最大宽度：或高度设置。 同样，它基于伸缩方向：

• Flex-basis in a column overrides height:, this is important because although width: will obey flex-shrink, height: will not. (This can cause confusing and unexpected results in your design.)

  列中的flex-basis会覆盖height：，这很重要，因为尽管width：将遵循flex-shrink，而height：则不会。 (这会在设计中引起混乱和意外的结果。)

重要注意事项 (Important to note)

Notice how auto is bold. By default, if you have a width set and did not declare a flex basis value, width will function normally on that element. There is no difference between how flex-basis: will function on your element and how width: will function on your element. Width will even obey flex-shrink when using Flexbox.

请注意， auto是如何加粗的。 默认情况下，如果设置了width且未声明flex基础值，则width将在该元素上正常运行。 flex-basis：如何在您的元素上起作用和width：如何在您的元素上起作用之间没有区别。 使用Flexbox时，宽度甚至会服从于伸缩收缩。

The divergent factor between width and flex-basis is the dynamic ability of flex-basis to change its effective direction based on the flex-direction.

宽度和柔韧性基础之间的差异因素是柔韧性基础基于柔韧性方向更改其有效方向的动态能力。

注意事项 (The caveat)

height: on the other hand acts a bit differently. The height property does not obey flex-shrink in the same way that width does. When using flex-direction column you should always use flex-basis to dynamically control your Flexbox’s sizing so that you have consistent and expected results.

高度：另一方面，行为有所不同。 height属性不像width那样服从于flex-shrink。 使用flex-direction 列时 ，应始终使用flex-basis动态控制Flexbox的大小，以便获得一致的预期结果。

Also take special note of bullet point number 4:

另请特别注意项目符号要点4 ：

• When flex basis is set to auto, it first checks for a width or height property (based on direction) if none, it uses the elements content sizing

  当flex base设置为auto时 ，它首先检查width或height属性(基于方向)( 如果没有) ，则使用元素的内容大小

This means that flex basis will auto size the element based on the content sizing ( the size of the inner element ) when it is set to flex-basis: auto. Only if there is not a width: or a height: set on the element.

这意味着当flex base设置为flex-basis：auto时，它将根据内容大小(内部元素的大小)自动调整元素的大小。 仅在元素上没有设置width：或height：的情况下。

最佳实践 (Best practices)

I recommend that when you can, as a best practice use flex-basis over width or height, this way your results are always consistent. Considering that width: will obey flex-shrink and that height: will not, understand that there can be dramatic differences between how width and height will function in a Flexbox when you use other Flexbox properties in conjunction, like flex-wrap for example. Also use the shorthand of flex for convenience sake, consistency and readability.

我建议，当最佳做法是在宽度或高度上使用flex-basis时，这样您的结果将始终保持一致。 考虑到width：将服从flex-shrink，而height：将不服从，请理解，当您结合使用其他Flexbox属性(例如flex-wrap)时，宽度和高度在Flexbox中的工作方式之间可能会存在巨大差异。 为了方便起见，一致性和可读性，也请使用flex的缩写。

The shorthand for flex-basis is (flex: $grow, $shrink, $size) and is set to (flex: 0 1 auto) by default.

flex-basis的简写为(flex：$ grow，$ shrink，$ size)，默认情况下设置为(flex：0 1 auto )。

flex: 0 1 200px;

There are some cases where you may need to use width or height over flex-basis. Some cases may include Flexbox bug workarounds. A good resource on that topic is Flexbugs. Flexbugs is also a good place to determine other best practices based on the browsers you intend to support.

在某些情况下，您可能需要在flex-basis上使用width或height。 在某些情况下，可能包括Flexbox错误解决方法。 关于这一主题的一个很好的资源是Flexbugs 。 Flexbugs还是根据您打算支持的浏览器确定其他最佳实践的好地方。

额外资源 (Additional resources)

In the following codepen example, I show flex-wrap to demonstrate a visual example of the above information from this article.

在下面的Codepen示例中，我展示了flex-wrap来展示本文中上述信息的直观示例。

Use this codepen and thoroughly review the code. You will see how I am only using flex-basis once in the entire codebase to control multiple scenarios. This is just one tiny example of possible use cases.

使用此代码笔并彻底检查代码。 您将看到我如何在整个代码库中仅使用flex-basis一次来控制多个场景。 这只是可能的用例的一个小例子。

结论 (Conclusion)

Knowing that flex-basis is both a width and a height constraint is a good tool to have. It is dynamically shift-able. Using flex-basis you can create some very intuitive design elements. Some can even switch during a Flexbox’s flex-direction change at a crucial breakpoint in your design, hopefully giving you a cleaner solution. This knowledge should also help you design better and more confidently with Flexbox, since this functionality is key to using Flexbox to its fullest potential.

知道flex-basis既是宽度约束又是高度约束，这是一个很好的工具。 它是动态可移位的。 使用flex-basis，您可以创建一些非常直观的设计元素。 在设计的关键断点处，有些甚至可以在Flexbox的伸缩方向更改期间进行切换，以期为您提供更清洁的解决方案。 这些知识还应该帮助您使用Flexbox更好地，更自信地进行设计，因为此功能对于最大限度地利用Flexbox至关重要。

If you think there is anything I missed, found a typo, etc… please let me know!

如果您认为我错过了任何事情，发现了错字等，请告诉我！

I hope this short and sweet article was found useful to someone. If you appreciated the effort invested, please give the article a clap! ?

我希望这篇简短而甜美的文章对某人有用。 如果您感谢您付出的努力，请为这篇文章鼓掌！ ？

保持联系 ？ (Get in touch ?)

If you would like to talk shop then the best place to link up with me is on linkedin or by contacting me through my website.

如果您想在商店聊天，那么与我联系的最佳地点是在Linkedin上或通过我的网站与我联系。

I will try my best to respond to any comments or questions here on Medium.

我会尽力在“ Medium”上回答任何评论或问题。

If you do the social thing: Instagram or Facebook.

如果您从事社交活动： Instagram或Facebook 。

Photograph credits: ( Waterfall | Jared Erondu ) ( Chatter | Dan Wayman ) ( Disclaimer | Pop & Zebra ) ( Objective | Olav Ahrens Røtne ) and ( Let’s go | Goh Rhy Yan ). All photos from Unsplash.com

图片来源：(瀑布|贾里德·埃隆杜)(聊天|丹·韦曼)(免责声明|流行与斑马线)(物镜|奥拉夫·阿伦斯·勒特涅)和(让我们去| Goh Rhy Yan)。 来自Unsplash.com的所有照片

翻译自: https://www.freecodecamp.org/news/flexboxs-flex-basis-explained-83d1a01413b7/

-ms-flexbox