Introduction
The Flexbox Containers CSS element has multiple properties attached to it, but they can be split into 2 types:
- CSS properties affecting the container behavior
- CSS properties affecting the items inside the container
Let’s take a brief overview of both groups.
Container CSS properties
The properties below affect the behavior of the flexbox container itself.
| CSS property | What does it do? | How is it called in Elementor? |
|---|---|---|
| flex-direction | Determines in which direction the container wants to stack the flex items. Valid values: columncolumn-reverserowrow-reverse | In Elementor Flexbox Container widget, the flex-direction property is called Direction, and it’s located under Layout > Items.  |
| flex-wrap | Determines whether the items in the container will shrink to fit one line (nowrap), or will keep their size definitions and force the creation of additional lines as the number of items grow.Valid values: wrapnowrap | In Elementor Flexbox Container widget, the flex-wrap property is called Wrap, and it’s located under Layout > Items.  |
| justify-content | Determines the way items inside the container will be spread throughout the container, based on the Direction selected (row/column). Valid values: centerflex-startflex-endspace-aroundspace-betweenspace-evenly | In Elementor Flexbox Container widget, the justify-content property is called Justify Content, and it’s located under Layout > Items.  |
| align-items | Determines the way items inside the container will be aligned, based on the Direction selected (row/column). Valid values: centerflex-startflex-endstretch | In Elementor Flexbox Container widget, the align-items property is called Align Items, and it’s located under Layout > Items.  |
Items CSS properties
| CSS property | What does it do? | How is it called in Elementor? |
|---|---|---|
| order | Determines the location of the selected item, when the item is part of an array of nested items.Valid values: a number. | In Elementor Flexbox Container widget, the order property is called Order, and it’s located under Advanced > Layout.  |
| flex-grow | Determines the growth of a contained item, in relation to other items in the container. Valid values: a number. | In Elementor Flexbox Container widget, the flex-grow property is called Size, and it’s located under Advanced > Layout.  |
| flex-shrink | Determines the shrink level of a contained item, in relation to other items in the container. Valid values: a number. | In Elementor Flexbox Container widget, the flex-shrink property is called Size, and it’s located under Advanced > Layout.  |
| align-self | Determines the alignment of the selected item, when the item is part of an array of nested items. | In Elementor Flexbox Container widget, the align-self property is called Align Self, and it’s located under Advanced > Layout.  |