WEBDEV Concepts

Part 2: Developing a site 39 Positioning controls using the Flexbox control The Flexbox layout mode works by repositioning controls within "boxes", setting a vertical or horizontal alignment, setting relative sizes and nesting boxes. Each box is a Flexbox control. The advantage of this mode is the automatic repositioning of boxes and the controls they contain, in order to fit the browser and/or the content. A page in Zoning mode (with or without layouts) can contain one or more Flexbox controls. Principle Within a flexbox container, controls are placed one after the other. For each Flexbox control, you must: • specify how the controls inside will be laid out: in rows or columns. • specify how the controls will behave when the container or the items are resized: wrap, grow, shrink, etc. Apply this method to as many controls as necessary to define their positioning and resizing behavior. Define the layout rules of the Flexbox control according to the size of the browser Rule used: Resize images proportionally Rule used: Reduce image width