Platinum Support

Flexbox element

Last Update: May 27, 2025

Add and delete the element

Click the Style tab Flexbox element 1

To access and use a widget:

  1. In Elementor Editor, click +.
    All available elements are displayed.

  2. Click or drag the element to the canvas. For more information, see Add elements to a page.

To delete the widget:

  1. On the canvas, select the element by clicking it.
  2. Press the delete key on your keyboard. For more information, see Delete elements from a page.

What is Flexbox element?

A Flexbox is a container designed to hold other elements, including other Flexboxes. Flexboxes allow you great flexibility in designing and arranging the content inside. This makes them a great tool for complex, pixel-perfect designs.  

See all the options available with the Rating widget.  

Common use case

Ellis is designing a home page for a salon. They want an eye-catching Hero section to catch visitors’ attention and allow them to book an appointment right from the home page.

enter the heading title 1 Flexbox element 3

See a video demonstrating the widget in action.

Add a Flexbox element: Step-by-step

  1. Add a Flexbox element to the canvas. For details, see Add elements to a page.
    1 click the Style tab 4 Flexbox element 5
  2. In the panel, click the Style tab.
    2 Open layout section 1 Flexbox element 7
  3. Open the Layout section.
    2 Set to row 1 Flexbox element 9
  4. Set the direction to Row.
    4 add two child flexboxes 2 Flexbox element 11
  5. Add two child Flexboxes inside the first Flexbox.
    The two child containers should be side by side.
    5 click style tab left 1 Flexbox element 13
  6. Select the container on the left by clicking it and click the Style tab.
    6 set to column 1 Flexbox element 15
  7. Open the Layout section and set the direction to Column.
    8 set size left 1 Flexbox element 17
  8. Open the Size section and set the Min Height to 600 PX and the Min Width to 60%. For details, see Style tab – Size.
    9 add backgrond color left 2 Flexbox element 19
  9. Open the Background section and add a background color. For details, see Style tab – Background.
    8 ADD 2 heads and a button 1 Flexbox element 21
  10. Add two Heading elements and a button. 
    11 ADD CONTENT AND STYLE 2 Flexbox element 23
  11. Add content and styling to the Heading and Button elements. See Heading element and Button element for details. For details on positioning, see Style tab – Spacing, Style tab – Size and Style tab – Position.
  12. Select the Flexbox on the right.
  13. Click the Style tab.
  14. Open the Layout section.
  15. Set the Height to 600 PX and the Width to 40%.
  16. Open the Background section.
    12 Add background to right container 1 Flexbox element 25
  17. Add an image as the background. For details, see Style tab – Background.

Settings for the Flexbox Element

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

4 Leave as H2 1 Flexbox element 27

Choose the HTML tag for your flexbox. Tagging your element correctly helps search engines understand your site and can help SEO.

Choices include:

  • Div
  • Header
  • Section
  • Article
  • Aside
  • Footer.

Click the plus sign to enter a link. Visitors clicking the Flexbox file will open the link. 

Note
If you add a link to a Flexbox, you cannot make any of the elements in the Flexbox clickable.

Open in a new tab: If the Flexbox contains a link, toggle on if you want the link to open in a new tab.

The general tab Flexbox element 29

See the individual articles on Style options:

 

On this page

Share this article