Advanced Container Knowledge

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 propertyWhat does it do?How is it called in Elementor?
flex-directionDetermines in which direction the container wants to stack the flex items. Valid values: columncolumn-reverserowrow-reverseIn Elementor Flexbox Container widget, the flex-direction property is called Direction, and it’s located under Layout > Items 
flex-wrapDetermines 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: wrapnowrapIn Elementor Flexbox Container widget, the flex-wrap property is called Wrap, and it’s located under Layout > Items 
justify-contentDetermines 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-evenlyIn Elementor Flexbox Container widget, the justify-content property is called Justify Content, and it’s located under Layout > Items 
align-itemsDetermines the way items inside the container will be aligned, based on the Direction selected (row/column). Valid values: centerflex-startflex-endstretchIn Elementor Flexbox Container widget, the align-items property is called Align Items, and it’s located under Layout > Items 

Items CSS properties

CSS propertyWhat does it do?How is it called in Elementor?
orderDetermines 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-growDetermines 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-shrinkDetermines 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-selfDetermines 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 

Share it on social networks

Was this article helpful?

Related content

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page