Currently, the best you can do to spread elements in FlexJS is by using OneFlexibleChildVerticalLayout and OneFlexibleChildHorizontalLayout.
The more we use FlexJS, the more we’re coming to the conclusion that we really need a ConstrainedLayout which has the features of the classic Flex layout… Harbs > On Feb 12, 2017, at 4:46 AM, Justin Mclean <jus...@classsoftware.com> wrote: > > Hi, > > An old trick to get things to be pined to the RHS was to use a 100% spacer in > MXML. > > However code like this doesn’t work in FlexJS: > > <js:HContainer percentWidth="100"> > <js:Label text="Left" /> > <js:Spacer percentWidth="100" /> > <js:Label text="Right" /> > </js:HContainer> > > But in FlexJS the spacer is 100% of the containers width and the button wraps > onto the next line. > > You can do this but is seems bit cumbersome: > > <js:HContainer percentWidth="100"> > <js:Label text="Left" /> > <js:Label text="Right" style="position:absolute;right:0px;" /> > </js:HContainer> > > And a little more cumbersome once you have several items you want to evenly > space. > > <js:initialView> > <js:View percentWidth="100"> > <js:HContainer percentWidth="100"> > <js:Container percentWidth="25"> > <js:TextButton text="one" style="margin-left: auto; > margin-right: auto;"/> > </js:Container> > <js:Container percentWidth="25"> > <js:TextButton text="two" style="margin-left: auto; > margin-right: auto;"/> > </js:Container> > <js:Container percentWidth="25"> > <js:TextButton text="three" style="margin-left: auto; > margin-right: auto;"/> > </js:Container> > <js:Container percentWidth="25"> > <js:TextButton text="four" style="margin-left: auto; > margin-right: auto;"/> > </js:Container> > </js:HContainer> > </js:View> > </js:initialView> > > Is there a better way of doing this? > > Thanks, > Justin >
