Flex Layout, also known as CSS Flexbox, is a powerful tool for designing responsive and dynamic layouts. It enables elements to adapt fluidly to different screen sizes, ensuring layouts look great across devices.
What is Flex Layout?
Flex Layout is a one-dimensional layout method for arranging items in rows (horizontally) and columns (vertically). It simplifies tasks like aligning, resizing, and spacing elements inside a frame, eliminating the need for manual sizing or positioning.
Unlike manual methods, which require you to specify exact sizing and position, Flex Layout dynamically adjusts the size and position of elements based on the space available, resulting in more fluid, responsive designs.
Key Concept of Flex Layout
To use Flex Layout effectively, it's important to understand two key concepts:
Flex Frame
The flex frame is the parent element that holds the items to be arranged. By applying Flex Layout to a frame, you can control how its items are aligned and spaced.
Flex Elements
Flex elements are the items inside a flex frame. These elements respond to the frame's settings but can also be sized individually.
How to Enable Flex Layout
Select the frame or group of elements you want to apply Flex Layout.
Locate 'Layout' settings in your styling panel.
Click the 'Flex' button, or use the shortcut
Shift+A.
Note: Flex Layout works only on frames. It cannot be applied directly to sections or individual elements.
Flex Frame Settings
Direction
The Direction buttons define how flex elements are arranged inside the flex frame:
Vertical (Column): Flex elements are stacked on top of each other, like a list.
Horizontal (Row): Flex elements are laid out side-by-side, like a row of buttons.
Wrap: Flex elements are laid out side-by-side and move to the next line if there's no more space.
Alignment
The Alignment panel controls how flex elements are spaced and positioned based on the direction set on the flex frame. You can align flex elements either packed or spaced between, each giving different alignment options:
Packed
Top left
Top center
Top right
Left
Center
Right
Bottom left
Bottom center
Bottom right
Spaced between (horizontal direction)
Top
Center
Bottom
Spaced between (vertical direction)
Left
Center
Right
Min Gap
The Min Gap field sets the minimum spacing between the flex elements. It's useful for ensuring a consistent distance when the elements wrap to a new line. The minimum gap has two types of options:
Auto
Sets the alignment to be spaced between and spreads the gap evenly.
Specific gap
Sets the minimum gap by a numeric value in either pixel units or percentages.
Reverse Order
The reverse button allows you to flip the order of the flex elements to provide the best layout per device.
Flex Elements Sizing
Flex elements can be sized as any other element but have the additional 'Fill space' option. It gives the power to dynamically grow and shrink according to the space available in the flex frame. This is incredibly useful for creating responsive layouts that dynamically adapt and fill unused space. Learn more about the other sizing options.
'Fill space' versus '100%'
'Fill space' may sound similar to sizing the element to be 100%, but it is not the same. If a flex element is set to fill space, it will only use the space available in the flex frame. I.e., if there are other elements in the same flex frame, 'fill space' will take up the unused space in the frame, while if set to 100%, it will use the full size of the frame and ignore any other element.