PDA

View Full Version : what's the difference between column layout and hbox layout?



lenlee
26 Feb 2015, 7:26 PM
In my opinion, they are same. they are both horizontal layout.Column layout uses columnWidth to divide a container into many parts, and hbox uses flex to divide. In fact, ColumnWidth and flex are the same with percentage.
After all, what's the condition can i use column layout or hbox layout?

joel.watson
6 Mar 2015, 7:11 AM
Hi lenlee--

Yes, you can get hbox and column layouts to behave very similarly in terms of "column" widths. Besides structural differences in terms of markup that is generated, the results for how the layout and management of the items within these layouts is quite a bit different, even if the results seem the same on the surface. I'd encourage you to check out the Fiddle I'm including below, open up developer tools, and just explore the differences between the two.

Thanks!
Joel

j8q

oliver_watkins
23 Jun 2016, 1:18 AM
Am I correct in assuming the column layout breaks to a new line whereas hbox does not? Eg: https://fiddle.sencha.com/#fiddle/1chf

jdkhamba
23 Jun 2016, 2:58 AM
In the example you have provided , the columnWidths add up to more than 1. So it is breaking to a new line. If they add up to 1 , they will be in the same line. Try making each of them as columnWidth:.25 and they won't break to a new line.

Hbox on the other hand uses flex as a relative width and regardless of what value they have, they will always be in the same line. For example, if the flex value of the items are 1,2,3,4 respectively, what that really means is that the first item will occupy 1/10 of the total width, second 2/10 of the total width and so on since 1+2+3+4 = 10.