The term child layout refers to how you arrange blocks that are within another block.
When you place one Builder element inside another, you can set child layout attributes on the outer element. Child layout options are only available on elements that have children inside them.
Often the outer, or parent, element is a Box block. Putting your content inside of a Box gives you access to all the child layout options in this document.
To display the Child Layout section:
- Select a parent container with child blocks.
- Open the Style tab.
- Go to the Layout section.
The Child Layout section only shows if the selected block has nested elements, also known as child elements.
One of the first considerations to keep in mind while using child layout settings is that all the properties discussed in this document are affected by the height and width of your elements.
For example, the screenshots below show three boxes with text blocks inside. There are no height or width constraints on any of the colored boxes and they are constrained only by the text inside them.
The outer, gray box on the left has a min height of 400px, and because the children are set to the flex-direction of column, they will take up all the vertical space available. Thus they are distributed evenly over the 400px height.
Their widths are dictated by the horizontal space needed for the text. If there was no text in these inner boxes, they would collapse because the boxes have no height set.
The image on the right shows the same outer box, but with a min height of 200px. The inner boxes still take up all available vertical space, but no more.
No heights or widths on children
Parent min height of 400px
Flex-direction: Column
No heights or widths on children
Parent min height of 200px
Flex-direction: Column
The following two screenshots illustrate the effect of parent width on child elements. This time the inner boxes are arranged in a row.
In the image on the left, the outer box has a max width of 200px. Because the boxes with the text in them require more than 200px of horizontal space in total, the inner boxes extend beyond the bounds of the outer box.
That problem can be solved using the wrap property, illustrated in the screenshot on the right.
To use Wrap, select the outer/parent box, and on the Style tab in the Child Layout section, click the Wrap button, as shown in the image on the right.
No heights or widths on children
Parent max width of 200px
Flex-direction: Row
No heights or widths on children
Parent min height of 200px
Flex-direction: Row
For more information on width, refer to How Width Affects Layout.
The properties in the Child Layout section are based on the CSS Flexbox model. If you're not familiar, Flexbox offers the flexibility not previously available for web layouts. However, it takes a bit of practice to both understand what the properties do, and to achieve the layout you want.
For these reasons, some additional exploration of Flexbox can help you get the most of the framework. Experimenting in the Builder Visual Editor can help. In addition, if you want external tutorials, check out these pages:
- Flexbox Froggy A Game with 24 levels
- Flexbox on MDN
- Flexbox Use Cases on MDN
One of the options in the Child Layout section is the Columns setting. You can convert your blocks to columns by following these steps:
- Select the parent block.
- Open the Style tab.
- In the Child Layout section, click Columns–the first button on the left–to convert to Columns.
The video below shows the process.
For more information about columns, refer to Using Columns to Build Responsively and Convert a Layout to Columns.
To arrange blocks horizontally, take the following steps:
- Select the parent block.
- Open the Style tab.
- In the Child Layout section of the Style tab click the button with horizontal dots.
The following video illustrates the process.
To create a vertical layout, take the following steps:
- Select the parent block.
- Open the Style tab.
- In the Child Layout section of the Style tab click the button with vertical dots.
You can set your blocks to wrap using the Wrap property in the Child Layout section.
To set wrapping:
- Select the parent block.
- Open the Style tab.
- In the Child Layout section of the Style tab click the button with the grid.
The video below shoes the steps, and illustrates the blocks wrapping on smaller screens.
The wrap property defines whether the child elements are displayed in a single line or can be flowed into multiple lines when necessary.
For more information on grids, refer to How to Make a Grid Layout.
The Scroll property keeps the child elements in a row and prevents them from wrapping. Therefore if the width of all the elements is wider than the page, a horizontal scroll bar is added and the user can scroll back and forth to view all the elements.
You can use this option if you don't want to increase the height of your layout if you want users to scroll right and left, or you don't want the child elements to wrap, for example.
To wrap blocks, take the following steps:
- Select the parent block.
- Open the Style tab.
- In the Child Layout section of the Style tab click the Scroll button, which contains three dots within angled brackets like this: <···>
Using the Justify Content section helps you layout child elements horizontally so that they are responsive and use Builder Best Practices by default.
The following options are available in the Child Layout section for Justify Content:
Top: Align your elements at the top of the parent element.
Center: Align your elements in the center of the parent element.
Bottom: Align your elements at the bottom of the parent element.
Space between: Position your elements with space between elements.
Space around: Position your elements with space before, between, and after.
The following image shows where to find the Justify Content section within the Style tab, in the Layout section.
Space Between adds space between the elements in the row, but not at the beginning or end:
Space Around adds space between the elements as well as before and after.
The final option in the image above is to add data bindings.
If you choose to add a data binding, then the other properties in that menu will not be available to set in the editor; instead, you can set them based on conditions you set in code.
To see how that's done, refer to Connecting Dynamic Data in Builder's Visual Editor.
Using the Align Children section helps you lay out child elements vertically so that they are responsive and use Builder Best Practices by default.
The following options are available in the Child Layout section for Align Children:
Left: Align your elements to the left of the parent element.
Center: Align your elements to the horizontal center of the parent element.
Right: Align your elements to the right of the parent element.
Stretch: Fills the available space evenly inside your parent element.
The following image shows where to find the Align Children setting in the Layout section of the Style tab under Child Layout.
Justify Content and Align Children work together to lay out your content in a flexible and responsive manner. Each property influences the other. While it can take a bit of experimentation to achieve your layout goals, the following images illustrate a few combinations.
Justify content: Space Between
Align children: Center
Direction: Column
Justify content: Space Around
Align children: Bottom
Direction: Row
Justify content: Space Around
Align children: Left
Direction: Column
Justify content: any
Align children: Stretch
Direction: Column
Justify content: any
Align children: Stretch
Direction: Row
Justify content: Left
Align children: Center
Direction: Row
The following Builder interactive samples are created in Builder. If you want to create your own, you can see how it's done in Creating a Section with a Changeable Background.
To see the Row and Columns properties in action, click Column or Row below:
Dress Fabric sample 1
Dress Fabric sample 2
Dress Fabric sample 3
To see the Justify-Content properties in action, click a property below:
Dress Fabric sample 1
Dress Fabric sample 2
Dress Fabric sample 3
To see the Align Children properties in action, click a property below. They behave differently based on whether your layout is set to rows or columns, so try both.
For more ideas for flexible layout options, refer to these documents:
For more information on element widths and alignment, refer to:
