Question

我见过一些示例，其中针对flex指定了一些数字，例如

{text: 'Actual', xtype : 'gridcolumn', dataIndex: 'some_data', flex: 1}

这家酒店传达了什么？指定的文档有点难以理解，因此更简单的解释将有很大帮助！

Answer 1

为了避免使用文档说明，您说您发现有点棘手：

Flex在hbox和vbox布局中用作属性，并指示此组件在其父容器中占用的空间量。

您可以使用大于零的任何数字作为弹性属性值 - 有些人喜欢使用整数来简化，有些人我曾经看过使用0.25这样的值来更容易地表示百分比。

flex in action的基本示例：

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.
    }]
});

这里的关键是知道定义布局的每个flex的值，而不是这些值如何相互关联。如果我将另一个灵活性为10的容器添加到此布局中，那将占用布局的一半，因为10是10 + 5 + 3 + 2 = 20的一半。

希望有所帮助！

Answer 2

让我们考虑一个例子，如果父容器的宽度为100，并且有三个子元素包含以下配置：

1st Element - width:70
2nd Element - flex:2
3rd Element - flex:1

现在，引擎将首先为第一个元素分配70。然后它将以2：1的比例划分剩余的可用宽度，并将20分配给第二个和第10个元素。

因此，flex是一种指定子元素之间相对宽度的方法。另外，只是添加，大量使用flex会在流体布局中产生问题，因为flex通常作用于剩余的可用宽度，如果总容器宽度减小，这可能甚至为0，这可能导致字段重叠。 Example here.

Answer 3

它用于VBox和HBox布局：

此配置选项将应用于的子项由此布局管理的容器。每个具有flex属性的子项将根据每个项目的相对弯曲水平弯曲 value与指定了flex值的所有项的总和进行比较。任何具有flex = 0或flex = undefined的子项都将不要'弯曲'（初始尺寸不会改变）。

请参阅http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.HBox等。

任何ExtJS4布局的'flex'属性是什么意思？

3 个答案: