flex-grow和width之间有什么区别？ [英] What are the differences between flex-grow and width?

问题描述

我最近开始使用flexbox，经常遇到这样的情况，我需要在元素之间的主轴上分布空间。

我经常在 width 和 flex-grow 。例如，如果我想要一个项目来度量2个度量，而另一个度量，加起来100％，我有两个选择。我可以设置 width：66.6％和 width：33.3％或 ：2 和 flex-grow：1 。

有时，如果我想要一个元素来增加剩余的空间，我可以做 width：100％或 flex-grow：1 。

如何选择？使用width和flex-grow有什么区别/注意事项？

解决方案

code>， flex-grow 属性不是用于定义flex项目的大小。

正如您在问题中指出的， flex-grow 用于在容器中分配可用空间。 p>

因此，更好的比较可能是 width 和 flex-basis 。

flex-basis 属性设置flex项目的初始主要大小， code> width 属性。

和 width 请参阅：

• flex-basis和width之间的区别是什么？

flex-basis 和 flex-grow 请参阅：

• flex-grow不会按预期调整flex项目大小

I've started using the flexbox recently and there often comes the situation where I need to distribute space on the main axis between elements.

I often hesitate between width and flex-grow. For example, if I want one item to measure 2 measures, and the other 1 measure, adding up to 100%, I have two choices. I can either set width: 66.6% and width: 33.3%, or flex-grow: 2 and flex-grow: 1.

Sometimes if I want one element to grow the rest of the space, I can either do width: 100% or flex-grow: 1.

How do I choose? What are the differences/considerations in using width vs. flex-grow?

解决方案

Unlike width, the flex-grow property is not designed for defining the size of flex items.

As you noted in your question, flex-grow is intended for distributing free space in the container.

Hence, a better comparison may be width and flex-basis.

The flex-basis property sets the initial main size of a flex item and is similar to the width property.

For the differences between flex-basis and width see:

• What are the differences between flex-basis and width?

For the differences between flex-basis and flex-grow see:

• flex-grow not sizing flex items as expected

这篇关于flex-grow和width之间有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！