use percentages ie
width = "100%"
From what I can tell, that works fine for single components like a label etc, but most of the containers in flex don't resize the children contained within them so this method doesn't work.
Actually...the Canvas container resizes the images within it, but I am now having trouble with the constraints and when you resize the images overlap all over each other and I can't apply a layout to it to handle it for me.
So if, for example in the code below, I wanted a canvas set out in a 3x3 grid, what sort of constraint/dimension values would I need for each of my images to ensure they always kept an equal distance whenever they resized with the main canvas keeping a perfect 3x3 grid of images?
<s:BorderContainer width="100%" height="100%" backgroundImage="@Embed('background.png')"> <mx:Canvas backgroundColor="0x6699FF" width="50%" height="50%"> <mx:constraintColumns> <mx:ConstraintColumn id="col1" width="*SOME VALUE*"/> <mx:ConstraintColumn id="col2" width="*SOME VALUE*"/> <mx:ConstraintColumn id="col3" width="*SOME VALUE*"/> </mx:constraintColumns> <mx:constraintRows> <mx:ConstraintRow id="row1" height="*SOME VALUE*"/> <mx:ConstraintRow id="row2" height="*SOME VALUE*"/> <mx:ConstraintRow id="row3" height="*SOME VALUE*"/> </mx:constraintRows> <!-- Need top/bottom/left/right constraint values for the images --> <mx:Image source="image1.png" /> <mx:Image source="image2.png" /> <mx:Image source="image3.png" /> <mx:Image source="image4.png" /> <mx:Image source="image5.png" /> <mx:Image source="image6.png" /> <mx:Image source="image7.png" /> <mx:Image source="image8.png" /> <mx:Image source="image9.png" /> </mx:Canvas> </s:BorderContainer>
instead of Canvas?
u can listen for the "resize" event on the main application and act accordingly.
Usually you can use 100% and if the totals add up to more than 100 it will
do the right thing.
Thanks for your replies! I have sort of got it working now by listening out for the resize on my main BorderContainer. The only thing is the images are spaced miles apart, even with the Gridlayout gaps set to 0? I'll have a play around and see what I can do, probably something in my calculations. Anyway, at least the images are resizing now and are nicely laid out in a grid so I'm on the right track
I also realized that it wasn't the containers not being able to resize the images, because they do that fine when you use percentages as you suggested. It was when I applied a layout to the container, it screwed things up and stopped the container from being able to resize them, which is kind of strange. Unless I'm missing something, doesn't if make the flex layouts a little pointless if they can't inherit properties of the container they are applied to?