Help Center
    Help Center
  1. Studio, Partners & Enterprise
  2. Wix Studio
  3. Using the Wix Studio Editor
  4. Adding elements in the Studio Editor
    5. Studio Editor: Managing and Customizing Flexboxes

Studio Editor: Managing and Customizing Flexboxes

5 min read
Manage and customize your flexboxes to create a unique experience for your visitors. You can resize items to fit your page structure, adjust the display settings, and add, delete, and re-order items as you go.
In this article, learn how to:

Managing flexbox items

Manage your flexbox items to further personalize your content and keep it up to date. You can hide items from breakpoints, change their order, and more. 

To manage your flexbox items from the Inspector:

  1. Click your flexbox.
  2. Click the Open Inspector arrow  at the top right of the Editor.
  3. (In the Inspector) Click Manage next to the number of items. 
  4. Choose what you want to do with your items:
  • Reorder: 
    • Hold the Reorder icon  next to the relevant item and drag it to its new position. 
  • Manage:
    1. Click the More Actions icon next to the relevant item. 
    2. Manage the items using the options:
    • Duplicate: Make a copy of a specific item.
    • Rename: Give each item a name you can recognize.
    • Delete: Remove the item completely.
    • Hide: Hide this item from the specific breakpoint you're working on.
The Manage items section of the Inspector panel. The cursor is hovering over the option to rename an item.

Customizing your flexbox display

Select a flexbox display to complement your page's structure. Depending on the display you choose, you can further customize its look by adjusting settings such gaps, direction, and width. 

To customize the display:

  1. Click your flexbox.
  2. Click the Open Inspector arrow  at the top right of the Editor.
  3. Select the Design tab .
  4. Click Layout.
  5. (Optional) Click Display type and select a type from the drop-down.
  6. Customize your flexbox based on the display type you choose:
    • Direction: Decide whether your items are organized from left to right or right to left. 
    • Item proportions: Click Equalize to give all flexbox items the same size definitions.
    • Item width: Select the width of the flexbox items in percentage, or set them all as the max width.
    • Gaps: Enter a value (in px, vh, vw, or to scale) for the horizontal and vertical spaces between the flexbox items. Note: If you choose the slider or slides display, the available options (horizontal or vertical) depend on the slider direction you choose.
    • Item alignment: Choose how your items should be aligned and positioned. Depending on the look you want to achieve, you can align the items to the flexbox edges (start or end), or create space between / around the items.
    • Overflow content: Select whether to hide or display overflow content.
    • Slider direction: Display your items on a horizontal or vertical slider.
    • Scroll snap align: Click the toggle to enable it. When scrolling through the slides of your flexbox, it "snaps" to each item (slide) so visitors don't miss it.
    • Items per slide: Set how many items are displayed per slide action.
    • Navigation: Add arrows, a button, or text to help visitors navigate through the items.
    • Show scrollbar: Show or hide a scrollbar for your visitors to scroll through the items.
The Layout section of the Inspector panel. The cursor is hovering over the gaps field.
Notes:
  • The customization options depend on the display style you choose.
  • Some older browsers don't support gaps (e.g. Chrome 76-83, Safari 12-14 and Edge 79-83). This means visitors who access your site from these browsers don't see the gaps you set between flexbox items. 
Working with breakpoints:
  • You can set a different flexbox layout for each breakpoint.
  • We recommend the column or slider layout on smaller screens such as mobile devices.

Resizing flexbox items

You can resize each individual flexbox item to make them bigger or smaller than the others. Use the Inspector panel to adjust each item's width and height, as well as the horizontal and vertical margins around items.

To resize an item:

  1. Click your flexbox.
  2. Select the item you want to resize.
  3. Click the Open Inspector arrow  at the top right of the Editor.
  4. Select the Design tab and select how you want to adjust the item:
    • Size: Enter your chosen size into the field, and select the unit of measurement.
    • Position: Select the relevant Margins / Padding option, and enter the chosen amount into the field.
The Design tab of the Inspector panel. The cursor is hovering over the minimum width field.

Did this help?

|
In this article
  • Managing flexbox items
  • Customizing your flexbox display
  • Resizing flexbox items

Related content

Studio Editor: Adding and Setting Up Flexboxes

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched