Flexbox

Align and control your layouts with incredible precision.

Flexbox, also known as flex or flexible box layout, lets you align elements in a box. Flexbox controls your layout in 1 dimension—vertically or horizontally. It's a layout setting, and it allows you to control the layout of other elements.

There are three things to consider when you work with Flexbox.

1. Flex parents and children
2. Flex parent settings
3. Flex child settings

Flex parents and children

You use flexbox on elements to control the alignment and size of child elements. We call parent elements that use Flexbox, a “flex parent.” A direct child element of a flex parent is called a “flex child.” You can make any element that contains other elements a flex parent. The default layout for any new div in toddle is Flexbox. In case you find yourself in a situation where it's not, you can do the following to create a flex parent:

1. Select the element (e.g., div) on the canvas
2. Click on Flex under Layout in the styling panel .

Unlike other Layout settings, Flex impacts the layout of direct child elements. Child elements with a Flex parent are aligned left and stacks horizontally by default in toddle. You can adjust how they are displayed with the

By default, Flex children align left and stack horizontally when you enable Flexbox on a parent element. You can adjust how they are aligned in the Layout settings.

Elements set to flexbox won’t affect the layout of the children within their direct child elements.

Flex parent settings

Flex parents have different layout options for themselves and its child elements:

• Direction
• Alignment
• Gap
• Wrap
• Padding

Set or reverse the direction

Flex parents present their content in a column layout by default. To set the direction, select the flex parent and click on the arrows in the Layout panel, just below Flex.

You can set the direction of your flexbox to column (Down arrow) or row (Right arrow). Content is shown left-to-right by default, but you may need to reverse the flex children in some cases. To do this, click on the Switch layout direction (two arrows, one up and one down). This flips the order of your flex children, so the first element is now last, the second element is now second to last, etc. Reversing the flex parent’s direction is great for apps that need to display information from right to left or when you design for minor breakpoints.

If you reverse the direction of your flex parent, the position of flex children in the document order doesn’t change.

Column layout

The column layout sets the direction of your flex-children and aligns them in a column.

Column layout - Switched

The layout direction switch allows you to adjust how your items are shown in the column. This control will present your content in the opposite order: instead of left-to-right, it will display the content right-to-left.

Row layout

You'll often want your layout direction in a row rather than a column. The row layout displays your flex-children in a vertical line.

Row layout - Switched

As with the column layout, you can adjust the direction with the switch layout direction button. This swaps the direction in which the flex-children are listed.

Mind the gap

Too much content can overwhelm and that's where gap comes in. Adding a slight gap will do wonders for your layout. Let's try to add a 32px gap to our example to see how it impacts our flex-children.

The gap between the flex-children is now 32px and it moved the items further apart.

To wrap or not to wrap

The default behavior of flex children is to fit on a single line, even if it means overflowing the flex parent.

This might work for some use cases, like a carousel where some items are out of view, but it makes less sense if you want your content to be visible at all times.

You can change how your flex parent wraps its content by clicking the wrap dropdown in the Layout menu.

The different options you have is

• nowrap
• wrap
• wrap-reverse

Nowrap is the option that displays flex children on a single line, even if it means overflowing the flex parent.

The wrap option handles the content differently. It moves items that are out of sight down to the next line.

When you select wrap, you arrange all the items available within your flexbox without overflowing the content.

You can use wrap-reverse if you need your content to be wrapped in the opposite direction.

You can control how your content is wrapped along with the layout direction to present your content in the exact way you'd like.

• Left to right
• Right to left
• Top to bottom
• Bottom to top

Alignment

When you have multiple rows or columns of flex-children, you can align them with the alignment box (i.e., the 3 x 3 grid). The 3x3 grid lets you align flex children inside a flex parent.

There are many ways to align content.

You can double-click on the alignment box to shrink or grow content.

Row layout direction

When flex-direction is set to row layout, you can use the alignment box to align content in the following ways.

You can stretch the row layout by double-clicking on the 3x3. This will stretch the content to fill the entire width of the flex-parent.

Column layout direction

When flex-direction is set to column layout, you can use the alignment box to align content in the following ways.

You can stretch the column layout by double-clicking on the 3x3. This will stretch the content to fill the entire height of the flex-parent.

Padding

Sometimes, you do not want your flex-children to hug the flex-parent, and that's where padding comes in.

padding helps you create space between parent and child elements. This feature is useful when you have many child elements.

There are three ways to use padding

• Inner horizontal padding (Add space between the top and bottom of elements)
• Inner vertical padding (Add space between the left and right of elements)
• Individual control (Add space between each of the four sides)

Vertical and horizontal padding can be equal on each side, but sometimes, you need complete control, and that's where individual control is proper. Let's say you only want to add padding on the left or bottom and left sides; that's when you use individual control.

Flex child settings

The default layout of flex children is based on the flex layout settings set on the flex parent. However, you can override these settings for a flex child:

• Size
• Alignment
• Spacing
• Order

Making children "flex"

You can set width and height on a flex child just like you can do with any element in toddle , but flexbox also has an other trick up its sleave. You can control how much a child should "flex". Flexing means that the child element stretches itself to fit the available space in the flex parent.You can adjust the flex properties of a flex child by selecting the child, then going to Styling panel > Size > Size styles . Click the three dots (settings) in the size section to open the size styles.

There are 4 options for sizing:

• Flex
• Shrink
• Grow child
• None

Flex

Sometimes, your flex-parent will have a lot of blank space or flex children. To ensure your layout doesn't look odd, you can set flex to 1. Your flex child should take up the remaining blank space of the flex parent. It's a neat way to style a flex child. The best part is that it adjusts with your grid and makes everything look pixel-perfect. This is the most powerful sizing option, enabling your flex child to grow and shrink as needed. Flex is actually a shorthand property for setting both grow and shrink.

Shrink

Shrink sets only the shrinking part of a flex child. A child that only has shrink set will not grow beyond its normal size, but will shrink if the container is not big enough to contain it.

Grow

Grow lets flex children grow if there is space for them to do so. This allows the flex children to absorb extra space in the flex parent.

None

If you don't apply any sizing options, you can size the flex child according to its width/height properties and make it fully inflexible. The flex child cannot grow or shrink, even in an overflow situation. This is useful in situations where you want to control the actual layout on the screen regardless of the viewport size.

Customize grow and shrink behavior.

You can also choose to fully customize the grow and shrink behavior of a child element. This determines how much the flex child shrinks or grows relative to other child elements in the flex parent. The Grow value defines how much the flex child can grow relative to other child elements when there's free space inside the parent element. If the value is set to 0, it won’t grow larger than it needs to. The Shrink value defines how much a flex child can shrink relative to other children without free space. If the value is set to 0, it won’t shrink, even in overflow situations. The Basis value determines the default size of an element before flex-grow or flex-shrink comes into play. You can set this to a specific dimension (e.g., 20%, 250px, etc.) or Flex 1. If set to Flex 1, the default size of a flex child will be based on its width or height — if set — or its content. If the basis value is set to a specific dimension, an element's content or width/height will be ignored, and the flex child will share the size with other flex children from the same flex parent.

Alignment of flex children.

You can adjust the alignment of a flex child with the alignment box. No magic tricks, just the exact same concept as how you'd align children with the flex parent.

Spacing

Spacing also works the same way as for flex-parents. You have the option to add a gap, padding, or even margin. If you wish to adjust the margin of any elements, go to Placement > Placement styles .

You can adjust the margin for each side of your element.

This is also the place where you can set the z-index. The z-index property sets the z-order of an element and its descendants or flex and grid items. Overlapping elements with a larger z-index cover those with a smaller one. A z-index value of 1 will sit on top of one with 0, and an element with 10 will sit on top of both 0 and 1.

How to order flex children

How you work with elements in toddle is uniform whether you are dealing with a flex-child or -parent. The ordering options work the same way you'd order a flex-parent. There's no discrimination here, just simple logical styling.

You are now a Flexbox pro or at least a well-versed beginner. Now it's time to wield your powers in the toddle editor.