Containers in 10Web Builder: Flexible Element Positioning

10Web Website Builder offers flexible controls for arranging elements within containers. Here's a breakdown of the available options to help you customize your layouts:

Navigate to the Items section under the Layout tab to access these controls.

Direction

The Direction setting lets you decide the arrangement in which the elements within your container will be showcased.

• Row: Elements are oriented horizontally.
• Column: Elements stand vertically.
• Row-reversed: Elements are displayed horizontally but in the opposite sequence.
• Column-reversed: Elements are set vertically, but the order is inverted.

Justify content

The Justify Content setting controls the alignment of elements along the main axis, which is determined by the container's chosen Direction.

• Start: Elements align to the left side of the container (if the Direction is set to Row) or the top of the container (if the Direction is set to Column).
• Center: Elements are positioned in the center of the container.
• End: Elements align to the right side of the container (if the Direction is set to Row) or the bottom of the container (if the Direction is set to Column).
• Space Between: This option distributes equal spacing between all the elements within the container, from the first to the last.
• Space Around: Similar to Space Between, but it also adds extra spacing at the beginning and end of the container, creating a margin around the elements.
• Space Evenly: This option ensures uniform spacing between all elements, including the container's edges. This can be useful for creating a grid-like layout.

Align items

Align Items aids in determining the alignment of elements along their cross-axis, based on the choice made in the Direction option.

• Start: Elements align to the top of the container (if the Direction is set to Row) or to the left of the container (if the Direction is set to Column).
• Center: Elements centrally align within the container.
• End: Elements positioned at the bottom of the container (if the Direction is set to Row) or at the right of the container (if the Direction is set to Column).
• Stretch: Elements expand to span the entire container height or width (depending on the Direction setting).

Gaps

Here, you can adjust the spacing between individual elements, be it widgets or other containers. The units available are pixels (PX), percentages (%), or Viewport Width (VW).

Wrap

The Wrap feature determines if the elements inside will stay confined to a single row or if they overflow to subsequent rows.

• No Wrap: All elements are constrained to a single horizontal line.
• Wrap: If items exceed the container's width, they transition to the next line.