How do I learn about Flexbox Containers?

Flexbox containers use the power of flexbox CSS to make building websites faster, while giving you more freedom than ever to create exactly the design you want. Containers also provide improved page loading and greater responsive control.

This is done by giving you the ability to alter each items’ width, height, and order, to best fill the available space of the container. This feature will replace the current section, column, and inner section functionality of the Elementor editor.

Flexbox Containers are currently a release candidate, you may need to activate them if you would like to use them on existing sites.  

You can also set up a sandbox website on your local machine or development server. This will let you learn how to best use containers in your designs without any worry about messing up your current live environment.

For a comprehensive understanding of containers, check out the articles below and you’ll be on your way to becoming a Flexbox container expert.

Flexbox Container video playlist

Basics:

• Intro to Containers
• Building a webpage using containers
• Introduction to layout
• Creating the layout
• How many containers should you use

Settings

• Container settings
• Item settings
• Move and reuse
• Responsiveness

Articles

What is a Flexbox Container? 

1. What is a Flexbox Container?
2. How do I create a Flexbox Container?

How do Flexbox Containers work?

1. How do Flexbox Containers work?
2. How do I set Flexbox Container size and behavior?
3. How do I arrange the elements in a Flexbox Container?
4. Flexbox Container Style tab settings
5. Flexbox Container Layout tab settings
6. Flexbox Container Advanced tab settings
7. Reusing containers – Creating your own superwidgets

What are Flexbox Container best practices?

1. How many Flexbox Containers should my page contain?
2. How do I improve performance with Flexbox Containers?
3. Flexbox Container performance – A closer look
4. How do I make Flexbox Containers clickable?
5. Responsive design using containers

Flexbox Containers – Common use cases

1. Basic layouts using Flexbox Containers
2. Creating an Intro Section using Flexbox Containers
3. Creating a Hero Section using Flexbox Containers
4. Creating a Call to Action Section using Flexbox Containers
5. Creating a Services Section using Flexbox Containers
6. Creating an Hero Image Gallery using Flexbox Containers

Creating Theme Builder templates with Flexbox Containers

1. Creating a Header template using Flexbox Containers
2. Creating a Footer template using Flexbox Containers
3. Creating a Single Page template using Flexbox Containers

How do I move to Flexbox Containers?

1. What is the difference between Flexbox Containers and the traditional section/column?
2. How do I convert sections to Flexbox Containers?