header-logo
Learn how to use Wix to build your site and business.
Design and manage your site using intuitive Wix features.
Manage subscriptions, plans and invoices.
Run your business and connect with members.
Learn to purchase, connect or transfer a domain to your site.
Get tools to grow your business and web presence.
Boost your visibility with SEO and marketing tools.
Get advanced features to help you work more efficiently.
Find solutions, learn about known issues or contact us.
placeholder-preview-image
Improve your skills with our courses and tutorials.
Get tips for web design, marketing and more.
Learn to increase organic site traffic from search engines.
Build a custom site using our full-stack platform.
Get matched with a specialist to help you reach your goals.
placeholder-preview-image

Studio Editor: Adding and Setting Up Flexboxes

2 min
In this article
  • Step 1 | Add a flexbox
  • Step 2 | Add items to your flexbox
  • Step 3 | Add elements to your flexbox
Use flexboxes to streamline the way you showcase content. These advanced layout tools are made up of responsive containers that adapt seamlessly to any screen size. Choose from a variety of display types, like Columns, Mosaic, and Slider, to elevate the style and functionality of your client's site.

Step 1 | Add a flexbox

To get started, head over to the Add Elements panel, select a flexbox preset and drag it onto your page. You can change the number of items and the way they're displayed later on.

To add a flexbox:

  1. Click Add Elements  on the left side of the editor.
  2. Click Layout Tools.
  3. Click Flexboxes.
  4. Drag and drop your chosen flexbox onto the page.
The Add elements panel in the studio editor. The cursor is hovering over a flexbox layout.
See how it works:
Drag the handles on your canvas to see how the content of the flexbox seamlessly reorganizes across breakpoints. 

Step 2 | Add items to your flexbox

A flexbox is made up of several items that are responsive containers. You can change the number of items in a flexbox and it will automatically resize the items to fit the available space. 
To add a new item, you can click Add Item or use the Manage Items panel in the Inspector. 
A blank flexbox in the Editor. The cursor is hovering over the Add items button.

Step 3 | Add elements to your flexbox

Choose what you want to display in your flexbox by adding elements to the items. You can hide or show elements on different breakpoints to create a unique experience for visitors, no matter the device.

To add elements to an item:

  1. Click Add Elements  on the left side of the editor.
  2. Select the element type you want to add.
  3. Click your chosen element to add it to your page.
  4. Drag the element to the flexbox item, and drop it when you see Attach.
A button that has been dragged to a flexbox. The Attach message is displayed.
What's next?
Customize and manage your flexbox to display the content you want, how you want.
The Add elements panel in the studio editor. The cursor is hovering over a flexbox layout.
A blank flexbox in the Editor. The cursor is hovering over the Add items button.
A button that has been dragged to a flexbox. The Attach message is displayed.