PDA

View Full Version : Why do I use flex?



Riaz
16 Feb 2011, 3:59 PM
I have a following example.



Ext.setup({
onReady: function () {

new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch',
direction: 'normal'
},
items: [{
cls:'card1',
html: 'Card 1',
flex: 1
}, {
cls: 'card2',
html: 'Card 2',
flex: 2
}, {
cls: 'card3',
html: 'Card 3',
flex: 2

}]


})

}
});






Can anybody explain to me why we are using "flex "?

mitchellsimoens
17 Feb 2011, 5:38 AM
Flex is the ratio to the width/height of each child.

Your width of the wrapping Panel is 100%. Say your child items have flex specified as 1, 2, 3. Add them together to get 6 and take 100 divide by 6 you got from adding the flex together and you get 16.6667.

Now when flex is equal to 1 the width is 16.6667% that of the wrapping Panel's width. Then your flex = 2 the width is 33.3333% and flex = 3 is about 50%. Add them up and you get 100%.

Understandable? :)

Riaz
17 Feb 2011, 2:47 PM
Flex is the ratio to the width/height of each child.

Your width of the wrapping Panel is 100%. Say your child items have flex specified as 1, 2, 3. Add them together to get 6 and take 100 divide by 6 you got from adding the flex together and you get 16.6667.

Now when flex is equal to 1 the width is 16.6667% that of the wrapping Panel's width. Then your flex = 2 the width is 33.3333% and flex = 3 is about 50%. Add them up and you get 100%.

Understandable? :)


Nice explanation. Great teacher.

dougbieber
31 Oct 2014, 5:21 AM
At first I thought you were referring to Adobe Flex (now dead). ;)