With version 3, Weaver added a Flex Columns widget in the "Plus" Plugin, which allows you to define a flexible layout of columns / boxes within a single widget. This new widget is based on a small CSS jewel called Flexbox. Flexbox has a number of very interesting features, making it easy to create arrays of responsive and flexible boxes. This tutorial will take you through the existing options of this new Widget, as well as give you tips on how to use simple Flexbox CSS rules to customize it even further, or combine it with other tools to make it even more powerful.  

Column Content Text Boxes

This first step lets you decide how many boxes you need and fill them with your content.

1) Number of available text boxes:

Lets you choose the number of boxes / column / sub widgets you need.

Remember to click Save to refresh the number of text boxes available

2) Content:

You can then enter your content in each Text Box, either simple text or any elaborate HTML with images and divs, to create any formatted content you need. If you are not HTML Savvy, you can create your formatted HTML using the content editor of a test page. Crete a new page, Compose your content using the content editor tools. Once the content looks the way you want, switch your content editor to text mode, Copy all of its content, then go to your X-Plus Flex Columns widget, and paste that HTML into the Text box of your choice.

3) Styling:

You have a CSS box on top of each Content box for individual text box styling, like background color, font size, text alignment... If you are not CSS savvy, use a CSS reference site like this one For Styling that should apply to All Text Boxes, use the CSS box detailed in the "Style Options for Text Boxes" Section further down  

Column Layout and Widths

This section lets you define the layout for all the content boxes.

1) Columns per rows:

Lets you select the width of your Text boxes, this in turn will dictate the number of rows of your layout, as when the sum of width exceeds 100%, a new row will be created. That option contains some presets which are self-explanatory, but also has a Custom Option. - When using preset Column per rows values, the layout will automatically change to 2 equal columns on small tablets, and a single column on phone - When choosing the Custom option, you need to click Save to actually see the custom Option boxes.

2) Desktop Row layout:

You will then be presented with a % width box for each of the Text Box you have created. Based on the values you enter, when the sum of boxes widths reaches 100%, a new row will be created. If you want all the boxes in one row to spread from edge to edge, make sure the total is 100%.

3) Small Tablet Row layout:

You get one set of boxes width for desktop, and one set for Small Tablets. This lets you optimize your layout on mobile devices

4) Phone Row layout:

For Phones, your choice is either two equal width columns, or a single column. There is just not enough space on Phone to make it worth differentiating further. (custom CSS can change that if imperative)

5) Responsive Layout Trigger Widths:

Lets you set the threshold that determines what a Small Tablet is and what a Phone is. By default, these match the Theme mobile threshold. - Desktop is all devices wider than 768px - Small Tablets are devices between 580px and 768px - Phones are devices under 580px wide.  

Style Options for this Widget Instance

This section includes a number of styling options for your layout.

1) Flex Justify Content:

This is where CSS flexbox gives us extra "flexibility". If in any given row, the total of text boxes widths is not an exact 100%, that option will determine how the boxes will be spread out on their row. For example if you are using 6 boxes with the following with: 25% - 40% - 25% - 30% - 20% - 30% These would create two rows of three boxes. On the first row (25% - 40% - 25%), they would occupy 90%, and on the second row (30% - 20% - 30%), only 80% Space Between only distributes the space between the boxes. Left and right side of the row will be flush

2) Flex Direction:

In 90% of the cases, you will just be using Row. You also have the option of Row reverse to reverse the order of the Text Boxes. Then you have two column options that require a deeper understanding of Flexbox and CSS to use. In principle, switching to columns provides all the same functionality as rows, swapping horizontal for vertical. Unfortunately, things get a little more complicated. The core issue here is that content flows from left to right first, and when no more space is available horizontally, it wraps down. When you reverse the Flexbox logic, switching from rows to columns, that does not change, and that creates some discrepancy in the whole Flexbox logic The widget container has a natural width limitation, coming for the width of the wrapper or the browser. As a result, when objects hit that width limitation, they will wrap into new rows. At the same time, the widget container has no vertical limitation, as its height can grow indefinitely, so all the content will always have a place to be visible. When you reverse things for columns, the fact that there is no height limitation means columns items will never wrap into a second column. In order for columns to wrap, a height or max-height would have to be set on the container (which you can do using its CSS box with a property like max-height:600px;) But by nature, a text box will expand horizontally first unless limited, so in order for several columns to form inside the widget container, you would need to limit their width. Unfortunately, the width option values of the Text Boxes only applies to Rows, so to limit the actual width of the boxes when using columns, you would need to add a width CSS value to each text Box CSS box with a property like width:250px; or width:20%; Then and only then will the column option be able to produce similar results to the Row options. One last caveat, when in column wrapping mode, the container is now limited in both vertical and horizontal position, so there is the possibility that as the browser gets smaller, all the content will not fit inside. This mean you may need Mobile rules to change the height limitation.

3) Flex Align Items:

This determines the vertical alignment of the text boxes when they have different heights. The Most common will be "Stretch", that will give them all the same height. But you also have the four other choices illustrated below Note: The Flex Align Items option is global and applies to all text boxes. You can override it on any given Text Box by using the Flexbox align-self property. For example, if you want all Text Boxes heights to be stretched, except for one, that should be vertically centered, you can set Flex Align Items to Stretch, then add the property below to the Text Box CSS box you want centered. align-self:center; Possible values are: auto | flex-start | flex-end | center | baseline | stretch

4) Spacing between text content areas:

You can specify the minimum amount of space you want around these Content boxes both horizontally, and vertically. The values chosen are applied on both sides equally (Left/Right, Top/Bottom). This is similar to the Space around option explained above. For example a 5px Left/Right spacing value will create a 5px space left of the first box in any given row, then 10px between each box, and a 5px right of the last box in any given row. Same for the Top/Bottom value.

5) Custom CSS for this Widget:

This CSS box styles the Container of the Text boxes. This is where you would put the max-height in case of Flexbox Columns.

6) Add classes to this Widget:

Use this to specify classes for the area for more advanced customizations.  

Style Options for Text Boxes

This gives you a CSS box for styling that is common to ALL the text boxes. For example, to give all boxes a background color and a border you would put the CSS below in that box border:1px solid black; background-color:lightblue; If you are not CSS savvy, use a CSS reference site like this one  

Advanced Customizations

1) Inserting an X-Plus Flex Columns widget in your content

The X-Plus Flex Columns widget can be a powerful tool to create page or post content layouts. A simple way to insert the widget inside your content, is to install the plugin "Widget Shortcode"

Widget Shortcode

Once installed, it creates a Widget Area called "Arbitrary" in Appearance > Widgets. You can drop any widget you need for your content in that area (as many as you require). Then above any page or post content editor, you will get a "Widget Shortcode" Tool icon that opens a drop down list with the names of all the widgets inside the "Arbitrary" Area. You can use this to insert an X-Plus Flex Columns widget (or any other widget) inside your page content.

2) Turning the X-Plus Flex Columns widget into a Widget Area

Using the same Widget Shortcode plugin mentioned above, you can easily insert actual widgets inside your X-Plus Flex Columns widget text boxes, basically turning the X-Plus Flex Columns widget into a Widget Area. After installing the Widget Shortcode plugin, just drop all the widgets you need inside the "Arbitrary" Widget Area, and then insert the shortcode of each widget you want in the appropriate Text Box. Note: Once you have installed the Widget Shortcode plugin, you can find the actual shortcode to use, to insert any of the widgets you placed in the "Arbitrary" Widget Area, by just opening that widget, and looking at the bottom.

3) Mixing Widget Areas and X-Plus Flex Columns widget for Advanced Layouts:

Xtreme has powerful widget areas that can already organize widgets in columns or rows, and with the addition of the “Plus” plugin, have the ability to create custom widget width for complex layout results. But ultimately when using just a Widget Area, or the X-Plus Flex Columns widget, the resulting layout is either a set of columns, or a set of Rows with boxes of different width. It does not allow you to mix rows within rows, or to create masonry type of columns. By combining Widget Areas with the X-Plus Flex Columns widget, or X-Plus Flex Columns widgets within an X-Plus Flex Columns widget, you can now truly generate EVERY possible layout, mixing rows and columns in the same design. In the first example below, you can structure the Widget Area (or an X-Plus Flex Columns widget) to create 3 columns, then inside each column, place an X-Plus Flex Columns widget, with all its Text Boxes set to 100% width, resulting in a Masonry columns type of layout Or you can structure the Widget Area (or an X-Plus Flex Columns widget) to create rows of variable width boxes, then insert an X-Plus Flex Columns widget to create a multiple row box inside one of the single row elements. Using "Plus" Per Page Widget Areas and its Widget Areas Shortcode, mixed with the X-Plus Flex Columns widget, or using the Widget Shortcode plugin to mix X-Plus Flex Columns widgets within an X-Plus Flex Columns widget, you can insert these powerful layout combinations inside your page content. This makes them a powerful tool to create complex Content Layouts in pages or posts. Note: The article bellows gives you more details on Widget Areas setup

Widget Area Layouts

As well as the section called "Per page widget area and widget_area shortcode" of the article below

Responsive Columns and Widgets

4) Flexible sizes:

CSS Flexbox has a few more powerful features. One of them is the ability to define flexible sizes. In regular CSS, the size of a box is either a fixed amount of pixel or a fixed % of the container width. You can add a min-width or max-width, but that does not really allow you to mix fixed width with % width in a responsive manner. Let us say you want one row of 3 boxes, the left one would hold an image, the other two text, and so you would like the first box to never get too big, yet at the same time when the browser gets really small, it would need to be able to scale down some as to not cause the other two to become too narrow. You can set the initial width to 25% - 40% - 35%, That will make sure that on small browsers, the last two always share a decent amount of space. Then in the first Text Box CSS box you would put: max-width:300px; This would make sure that on large browsers, the image in box #1 does not get too big But with regular CSS, the problem with such setting is that, as the browser gets large, the total (300px + 40% + 35%) would no longer be 100% and there would be leftover space in the row of boxes. To handle this, Flexbox allows you to define properties that make the sizes of the last two boxes “flexible” Flex-grow: Lets you set a factor that determines how much a box is allowed to grow above its nominal set width if needed Flex-shrink: Lets you set a factor that determines how much a box is allowed to shrink below its nominal set width if needed 0 means no change from set width, 1 means 1x, 2 means 2x….. In our case, you would add the following CSS to box 2 & 3 CSS boxes: flex-grow:2; Now as the browser gets larger, boxes #2 & #3 will be allowed to expand from their initial 40% - 35% up to 80% - 70% if needed

5) Reordering Text Boxes:

Flexbox has another great feature, and it is the ability to reorder boxes with a simple CSS rule. This can be useful if after putting all your content in, you find out you should have placed the content differently. Or if you need to move boxes around on mobile to optimize the layout How it works: The Text Boxes all get an order property with their default order position. Box-1: (order:1); Box-2: (order:2); Box-3: (order:3); Box-4: (order:4); Box-5: (order:5); If at any point you need to move a box somewhere else, all you need to do is add the order property with the new position in the Text Box CSS box. For example, if wanting to move Text Box #4 somewhere else, adding the following order property (in bold) to its CSS box will produce the following results order:5; will move it after Box-5 order:3; will move it after Box-3 order:2; will move it after Box-2 order:1; will move it after Box-1 order:0; will move it before Box-1 If you wanted to use that to change a Text Box order on mobile, you would need to add a mobile rule to the Theme Custom CSS Rule box To create the rule, you will need to know the ID of the Widget. If you have Installed the Plugin "Widget Shortcode", that ID will actually show up at the bottom of your Widget editing box like [widget id="wvrx_columns-1"] If not, you need to use your browser developer tool to inspect the widget and find its ID. Then the rule to add to the Theme Global Custom CSS Rule box would look like

.is-mobile #wvrx_columns-ZZ .wvrx-fb-col-XX {order:YY;}

ZZ = Number shown in the Widget ID name XX = Text box number YY = New order position to move Box #4 after Box #2 in the Widget with the ID wvrx_columns-1 on mobile devices, the rule would be:

.is-mobile #wvrx_columns-1 .wvrx-fb-col-4 {order:2;}

Note: There are many device classes you can use in such rules All these classes are found in the Help under "Weaver Xtreme Helper Classes"   The main ones are Sizes .is-desktop - Desktop (wider than 768px) .is-mobile - Small-tablet or Phone (under 768px wide) .is-smalltablet - Small tablets (between 580px and 768px wide)- note: many phones will be considered smalltablet when in landscape view .is-phone - Phones (under 580px wide) - note: usually when in portrait mode only Types .is-ios - an iOS device: iPhone, iPod, iPad .is-ipad - an iPad .is-ipod - an iPod .is-iphone - an iPhone .is-android - any Android device .is-windows - any Windows OS .is-macos - any Mac OS Note: If you want to learn more about the wonders of Flexbox, you can read the very well-illustrated article below.

A Complete Guide to Flexbox