Complete Layout Guide

Creating Flexbox Containers in Breakdance

This article explains how to use Breakdance’s flexbox container elements for creating responsive layouts. Breakdance containers are flexbox containers by default, offering both basic and advanced layout controls for versatile web design.

Understanding Basic Layout Controls

Aligning Content Within Containers

  1. Click a container (div, column, section) and go to the Design tab in the Properties panel to find the ‘Layout’ section.
  2. Use ‘Align’ to set horizontal alignment: Left, Center, Right.
  3. Adjust ‘Vertical Align’ for vertical positioning: Top, Middle, Bottom.
  4. ‘Gap’ controls the space between elements within the container.
  5. Remember, these settings are responsive and can be adjusted for different device widths.

Implementing Horizontal Layout Controls

Creating Horizontal and Vertical Layouts

  1. In ‘Horizontal Controls’, choose ‘Align’ for horizontal stacking: Left, Center, Right, Space Between, Space Around, Space Evenly.
  2. Select ‘Vertical Align’ for vertical alignment within the horizontal layout: Top, Middle, Bottom, Baseline.
  3. ‘Vertical At’ determines when the layout switches from horizontal to vertical on different devices.

Nesting Containers for Complex Layouts

Place containers within other containers (e.g., div within a div) to create complex layouts. Adjust layout settings for each container individually to achieve the desired design.

Advanced Flexbox Controls

Accessing Advanced Flexbox Options

  1. Go to ‘Settings’ > ‘Advanced’ > ‘Wrapper’ in the Properties panel for the container.
  2. Under ‘Layout’, select ‘Display Flex’ to access advanced flexbox controls like Flex Direction, Align Items, and Justify Content.

Flex Child Controls

In the ‘Advanced’ panel under Settings > Advanced > Wrapper > Layout , select ‘Flex Child’ to access controls such as Align Self, Order, Flex Grow, Flex Shrink, and Flex Basis.

Additional Notes

Flexbox containers in Breakdance provide a powerful tool for web designers, allowing for responsive and complex layouts with minimal effort. Whether you’re using basic alignment controls or delving into advanced flexbox settings, Breakdance’s container elements offer flexibility and ease of use.