PDA

View Full Version : What does flex do?



nosarious
20 Jul 2010, 12:04 AM
No, seriously. I've been seeing it in a few places and all I can think of is a puny little class surrounded by divs, trying to do the whole 'muscle' pose so girls will help him with layouts and get him displayed...

so what does flex: 1 really mean?

evant
20 Jul 2010, 12:13 AM
It's a ratio:



new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: 'Foo',
style: 'border: 1px solid red;'
},{
flex: 5,
html: 'Bar',
style: 'border: 1px solid blue;'
}]
});


In the above, the blue panel takes up 5/6 of the height.

You can also mix in items with fixed height:



new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: 'Foo',
style: 'border: 1px solid red;'
},{
flex: 5,
html: 'Bar',
style: 'border: 1px solid blue;'
},{
html: 'Fixed at 200',
height: 200,
style: 'border: 1px solid green;'
}]
});


The blue panel now takes 5/6 of the remaining height, after the height of the fixed size item is allocated.

Animal
20 Jul 2010, 12:26 AM
This is a case where the Main ExtJS API docs include the configuration even though it's not technically a config of the layout, it's a config of the layout's child.

The Sencha Touch API docs don't include this because of the ambiguity as to where it should go. It's not really a config of the Panel class, so it's not right just to put it there? Maybe with a strong warning that it's only use by box layouts?

Anyway: http://www.sencha.com/deploy/dev/docs/?class=Ext.layout.VBoxLayout&member=flex

uxdan
20 Jul 2010, 5:19 AM
Maybe I'm just overlooking something simple (like leaving the panel to render without a height or flex), but is there a way to let the panel determine the height based on the content inside?

I'm more curious from a two panel vertical setup where the top box height is determined based on dynamic content.

snehalmasne
10 Sep 2015, 1:00 AM
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.

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.

A basic example of 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.
}]
});



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.