Layout

layout controls how child elements or content are arranged, including direction, alignment, justification, wrapping, and gap it ensures consistent spacing and alignment across different devices layout options direction – sets the main axis of the layout determines how child elements are placed inside the parent horizontal – elements are arranged left to right ( flex direction row ) vertical – elements are arranged top to bottom ( flex direction column ) reverse – elements are arranged in the opposite order of the selected direction for technical details, see the mdn article on flex direction https //developer mozilla org/en us/docs/web/css/flex direction justify – defines how child elements are distributed along the main axis start – items are packed at the beginning of the container center – items are centered along the main axis end – items are packed at the end of the container space between – items are evenly distributed with equal space between them space around – items are evenly distributed with space before, between, and after each item see the mdn article on justify content https //developer mozilla org/en us/docs/web/css/justify content for more align – controls how elements are aligned along the cross axis (perpendicular to the main axis) start – items align to the start of the cross axis center – items align to the center of the cross axis end – items align to the end of the cross axis stretch – items stretch to fill the available space along the cross axis learn more in the mdn article on align items https //developer mozilla org/en us/docs/web/css/align items wrap – determines whether items should stay on a single line or wrap onto multiple lines if space is limited no wrap – all items stay on a single line wrap – items wrap onto multiple lines as needed see the mdn article on flex wrap https //developer mozilla org/en us/docs/web/css/flex wrap gap – defines spacing between child elements controls both horizontal and vertical spacing, equivalent to the css gap property details can be found in the mdn article on gap https //developer mozilla org/en us/docs/web/css/gap usage select the element to be styled select the style section in the right sidebar expand the layout tab configure direction, justify, align, wrap, and gap as needed notes child elements or nested containers can have their own layout configuration and do not inherit the parent’s layout properties by default if you edit the element while the widget builder is set to mobile view, those changes will apply only to the mobile layout and will not affect the default (desktop) layout