Box

The Box component is a special component that allows you to create containers for other components, and control the layout within the container using the Layout Controller. 

You can experiment with different layout options for the three icons below here.

As you can see, first you need to select the component inside the container (not the container itself).

Open Layout Controller, you will see a basic preview window, and three columns of buttons, and a slide bar:

First you need to specify the flow direction: vertical or horizontal.

Once specified, you can further refine the layout by specifying how items are aligned to the container axis, as well as how items should be distributed alone the container.

Practice

If you want to make a layout like the folllowing:

Since there can only be one flow direction within a Box component, you can achieve different flow directions by dividing the Box into multiple sub-boxes. 

For example, you could create a horizontal Box containing two vertical Boxes to achieve the desired layout. You can experiment with this technique by trying it out live here.

The hierarchy structure in the Raber editor shows how Box components contain other Boxes to create the layout of a page. 

By nesting Boxes inside one another, you can achieve complex and dynamic layouts with ease.