Pixel Perfect

Flexbox is the foundation for how columns behave in Editor 2.0. It controls how elements stack, align, and space themselves inside containers, giving you full control over layout across different screen sizes. By adjusting properties like stacking direction, content alignment, and wrap, you can create clean, organized designs that adapt smoothly to any device. These features help prevent layout issues, make better use of space, and simplify how you manage rows and individual elements. Learning how to use Flexbox effectively leads to faster builds and more consistent, responsive websites.

Key Takeaways

• Why This Matters for Your Site
• Columns in Editor 2.0 use Flexbox to control how content is arranged
• Flexbox determines how widgets inside a container (like a column) stack—either horizontally or vertically
• Knowing how Flexbox works helps you control layout more precisely at every breakpoint
• What Flexbox Is
• Flexbox = short for Flexible Box Layout Module
• It’s a one-dimensional layout system, meaning:
• You can stack items in a row (horizontal)
• Or stack items in a column (vertical)
• But not both at the same time within a single container
• How to Control Flexbox in the Editor
• Select a column
• Go to the Layout property in the Design Panel (right-hand side)
• Look for Stacking Direction
• Set to horizontal: elements appear side-by-side (row)
• Set to vertical: elements appear top-to-bottom (column)
• Add or duplicate widgets to see them stack according to the chosen direction
• What Flex Items Are
• Any element inside a Flexbox container (like a column) is called a flex item
• The stacking direction applies to all items inside that container
• You can’t mix row and column directions in the same container using basic Flexbox
• Common Use Case
• Want two items side-by-side, and two more beneath them?
• You'll need to nest layout elements (like adding columns inside a grid or other container)
• A single column can’t handle that mix, since Flexbox only stacks in one direction at a time
• Editing Rules
• Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
• Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
• Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint
  

Key Takeaways

• Key Properties to Know
• Horizontal content alignment and vertical content alignment are Flex container properties
• These control how all items inside a column are positioned
• Behavior depends on the column’s stacking direction:
• If stacking is horizontal, horizontal alignment has more options
• If stacking is vertical, vertical alignment gets more control
• Alignment Options Include
• Left / Center / Right (for horizontal stacking)
• Top / Middle / Bottom (for vertical stacking)
• Space Between – evenly splits space between items
• Space Around – adds equal space around each item
• Understanding Space Distribution
• Flexbox doesn’t just push elements—it also manages leftover space
• For example:
• Space between = equal space only between items
• Space around = equal space on all sides of each item
• This can make spacing between items appear double
• Individual Alignment
• You can override container alignment by selecting an individual element
• In the Design Panel, use the Alignment property to adjust placement for that element only
• Example:
• Shape 1 at the top
• Shape 3 at the bottom
• Important: if you change alignment again at the container level, it will reset any specific alignment on individual items
• Editing Rules
• Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
• Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
• Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint

Key Takeaways

• Why This Matters During Site Builds
• Wrapping controls how elements behave when there's not enough space in a row
• Helps maintain proper spacing and alignment across different screen sizes
• Prevents elements from being squished or overflowing in tight layouts
• Where to Find It
• Go to the Layout section in the Design Panel
• Two options:
• No Wrap (default): forces all elements into one row
• Wrap: allows elements to move to a new row if needed
• What Happens with No Wrap
• Elements stay on a single row no matter how many are added
• If total width exceeds 100%, all items shrink to fit
• Example:
• 10 elements at 10% width = 100% → fits perfectly
• Add an 11th element → total = 110% → elements shrink to squeeze in
• What Happens with Wrap
• Elements keep their assigned size
• Once space runs out, new items drop to the next row
• This avoids layout issues on smaller screens or with many widgets
• Align Rows (Only with Wrap On)
• When Wrap is enabled, the Align Rows property appears
• Align rows vertically across the column:
• Options include Top, Middle, Bottom, etc.
• Helps keep row spacing consistent even when multiple rows are created
• Why Use Wrap
• Keeps layout cleaner
• Avoids crammed designs
• Gives elements room to breathe while respecting your set widths
• Editing Rules
• Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
• Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
• Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint