javascript 任何 ExtJS4 布局的“flex”属性是什么意思？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8241682/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is meant by the 'flex' property of any ExtJS4 layout?
提问by Unos
I have seen examples where some number is specified against flex, like say
我看过一些例子，其中一些数字是针对 flex 指定的，比如
{text: 'Actual', xtype : 'gridcolumn', dataIndex: 'some_data', flex: 1}
What is conveyed by this property? The documentation specified is a little difficult to understand, so a simpler explanation would greatly help!
这个属性传达了什么？指定的文档有点难以理解，所以更简单的解释会很有帮助！
回答by Daniel Attfield
To avoid using the documentation description, which you said you found a bit tricky:
为避免使用文档描述，您说您发现它有点棘手：
Flex is used as a property in hbox and vbox layouts, and indicates the amount of space this component will take up in its parent container.
Flex 在 hbox 和 vbox 布局中用作属性，并指示此组件将在其父容器中占用的空间量。
You can use any number greater than zero as a flex property value - some people like to use whole numbers for simplicity, others I've seen use values like 0.25 to more easily represent percentages.
您可以使用任何大于零的数字作为 flex 属性值 - 有些人为了简单起见喜欢使用整数，其他人我见过使用 0.25 之类的值来更容易地表示百分比。
A basic example of flex in action:
flex 的一个基本例子：
var myPanel = Ext.create('Ext.panel.Panel', {
width: 100,
height: 100,
layout: {
type: 'hbox',
align: 'stretch' // Stretches child items to the height of this panel.
},
items: [{
xtype: 'container',
html: 'Container one!',
flex: 5 // This takes up 50% of the container.
}, {
xtype: 'container',
html: 'Container two!',
flex: 3 // This takes up 30% of the container.
}, {
xtype: 'container',
html: 'Container three!',
flex: 2 // This takes up 20% of the container.
}]
});
The key here is knowing that it's not the value of each flex that defines the layout, but how these values all relate to each other. If I added another container with a flex of 10 into this layout, that would take up half of the layout, since 10 is half of 10 + 5 + 3 + 2 = 20.
这里的关键是知道定义布局的不是每个 flex 的值，而是这些值如何相互关联。如果我在此布局中添加另一个 flex 为 10 的容器，它将占据布局的一半，因为 10 是 10 + 5 + 3 + 2 = 20 的一半。
Hope that helps!
希望有帮助！
回答by netemp
Lets consider an example for this, if there is a parent container having width as 100, and having three child element with following configs:
让我们考虑一个例子，如果有一个宽度为 100 的父容器，并且有三个具有以下配置的子元素：
1st Element - width:70
2nd Element - flex:2
3rd Element - flex:1
So now, the engine will first allocate 70 to the first element. And then it will divide the remaining available width in the ratio of 2:1 and allocate 20 to second and 10 to third element.
所以现在，引擎将首先分配 70 给第一个元素。然后它将以 2:1 的比例划分剩余的可用宽度，并将 20 分配给第二个元素，将 10 分配给第三个元素。
Thus, flex is a way of specifying the relative widths among child elements. Also, just to add, heavy use of flex can create problem in fluid layouts given the fact that flex generally acts upon the remaining available width which can be even 0 if the total container width is reduced and this can lead to overlapping of fields. Example here.
因此，flex 是一种指定子元素之间相对宽度的方法。另外，补充一点，考虑到 flex 通常作用于剩余的可用宽度，如果容器的总宽度减少，甚至可以为 0，这可能会导致字段重叠，因此，大量使用 flex 会在流体布局中产生问题。 例子在这里。
回答by Lloyd
It is used in the VBox and HBox layouts:
它用于 VBox 和 HBox 布局：
This configuration option is to be applied to child items of the container managed by this layout. Each child item with a flex property will be flexed horizontally according to each item's relative flex value compared to the sum of all items with a flex value specified. Any child items that have either a flex = 0 or flex = undefined will not be 'flexed' (the initial size will not be changed).
此配置选项将应用于此布局管理的容器的子项。每个具有 flex 属性的子项将根据每个项的相对 flex 值与具有指定 flex 值的所有项的总和进行水平弯曲。任何具有 flex = 0 或 flex = undefined 的子项都不会“弯曲”（初始大小不会改变）。
See http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.HBoxetc.
参见http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.HBox等。
