The Flex Element in Droip allows you to create flexible and responsive layouts using CSS Flexbox, all through a visual interface.
The Flex Element is a layout container in Droip that uses the power of CSS Flexbox to arrange its direct children (child elements) in 1 dimension, either row or column.
It’s perfect for building horizontal menus, vertical stacks, split layouts, sidebars, and more.
A Flex Container is the parent element and the direct children of that element become Flex Items.
To enable the Flex display for any element that contains other elements inside it:
Alternatively, you can add a Flex element to your page from the Elements Panel to start from scratch.
Place your desired elements inside the Flex container (these will be Flex Items).
The flex-direction property determines the direction in which the flex items are laid out.
Use Case: Choose row for horizontal navigation bars and column for stacked content like cards or list items.
The cross-axis is the perpendicular axis to the main axis within a flex container. The main axis is defined by the flex-direction property, which can be set to a row or column.
For example, if the flex-direction is set to row, then the main axis will be horizontal, and the cross-axis will be vertical.
The flex-wrap property sets whether flex items are forced onto one line or can wrap onto multiple lines. By default, Flex items stay on a single line.
Nowrap
The flex items are laid out in a single line, which may cause the flex container to overflow.
Wrap
Items wrap onto multiple lines from top to bottom (or left to right).
Wrap-reverse
Behaves the same as wrap, but in reverse order.
The Gap setting lets you control the spacing between flex items, both row gap and column gap.
With Flex Gap, you can easily create consistent spacing between cards, icons, or buttons without adding padding/margin manually.
Controls the alignment of items along the cross axis (perpendicular to the main axis).
When there are multiple lines of flex items (e.g., wrapping is enabled), you get additional alignment options. It controls the space between rows on the cross-axis.
The justify property controls the alignment of items along the main axis (the direction defined by flex-direction).
Use Case: Use space-between for equal distribution (e.g., navigation links), or center for symmetrical designs.
📝 Note: Many of these options can also be found on the Flex Controller. To access this controller, simply click on the blue settings icon on the flex element’s top-right corner.
A flex child is also referred to as a flex item. In Droip, each child inside the Flex container also have its own flex-specific settings for more granular control.
The align-self property controls the alignment of individual flex items along the cross-axis of the flex container. It applies only to individual flex items, whereas align-items applies to all flex items within the container.
Available Values for align-self:
The Order property controls the order in which flex items appear within the flex container.
By default, all flex items have an order value of 0, but you can change it to reorder items based on different screen sizes, create a responsive layout, or for accessibility reasons.
The order property accepts integer values, and you can assign a different order value to each flex item within the container. Flex items with lower order values appear first, followed by items with higher order values.
For example, if you set the order value of one flex item to -1 and another to 1, the flex item with the order value of -1 will appear first, followed by the flex item with an order value of 0, and then the flex item with an order value of 1.
In Flex Ratio, you can set the flex-basis, flex-grow, and flex-shrink properties to create flexible and responsive layouts.
flex-basis
This property sets the initial size of a flex item along the main axis of the flex container. It specifies the default size of the flex item before any remaining space is distributed according to the flex-grow and flex-shrink properties.
The flex-basis property can be set to a length value, such as pixels or percentages, or it can be set to the auto keyword, which means the initial size of the item will be based on its content.
flex-grow
This property determines how much a flex item will grow when there is extra space available along the main axis. It accepts a unitless value that represents the proportion of available space that the flex item should take up relative to other flex items within the same flex container.
flex-shrink
This property controls how much a flex item will shrink when there is not enough space to accommodate all the items within the flex container. It also accepts a unitless value that represents the proportion of space that should be taken away from the item when
Was this page helpful?
Our website uses cookies to improve your browsing experience on our website. By continuing to use this website, you agree to their use. For details, please check our Privacy Policy.
Experience Droip in Action – Explore a live-built page and see the power of our builder in action.
Explore Live