Positioning

With Betheme V26, we have completely rebuilt Sections & Wraps, basing them on CSS Flexbox. It means that spacing and positioning is extremely flexible and layouts can be as advanced as never before.

Below, we will try to explain it in detail using a specific example from one of the pre-built websites.

What is CSS Flexbox?

The Flexbox Layout aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic.

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.

For more details, we recommend to read this article.

In Betheme V26 with BeBuilder (previously known as Muffin Builder), you will find flexbox settings under Positioning tab for Sections & Wraps. These options will help you build layouts that have not been possible until now with great ease.

In Section, you will see three options: Section Content Position, Wraps Vertical Spacing and Horizontal Align.

For Wrap, there are four options: Wrap Position, Wrap Content Position, Elements Vertical Align and Elements Horizontal Align.

Section

First, let's focus on the options for the section.

Section content position

To align content inside the section, its height has to be higher than wraps with the content inside. Therefore, if you set custom dimension for the section, you can control position of elements inside with the following options.

Wraps vertical spacing

If for some reason you need to align the wraps in the section with respect to each other, you can do it with this option easily. This option is especially useful when the wraps height is different.

Horizontal align

Within this option, it is possible to align wraps horizontally. Please note that space is required to manage wraps alignment. For example, if you have 2 x 1/2 or 3 x 1/3 elements, there would be no space to move wraps horizontally. Let's go through the examples below to better illustrate the situation.

Wrap

In this part, we will focus on the positioning options for individual wraps and their content.

Wrap position

Let's say, we have 3 wraps where content inside each is of a different size. For better explanation, we aligned wraps in section horizontally by default. While explaining the various options, we will focus on positioning the first wrap with "Cafe" title.

Wrap content position

Within the set of these options, you can position the content inside wraps. But please note that these options works with Stretch only. In this case, we will focus on the 3rd wrap which contains 3 counters.

Elements vertical align

To demonstrate the possibilities of these options, we will need wrap with 2 elements inside. In our case, it's gonna be the middle wrap with some text on the left and the image on the right. So let's take a closer look at the options below.

Elements horizontal align

This set of options allows you to align the content of the wrap horizontally. For a closer look at these options, we have created wrap with few elements inside.