Allow users to resize the layouts and re-order layouts on a grid system. This new logic is based on the Bootstrap 4 grid, allowing many new settings to customize the Flexible Content behavior.
| Setting name | Description |
| Align | Define the grid alignment: Left, Center, Right, Space evenly, Space between or Space around |
| Vertical Align | Define the vertical alignment of columns: Stretch, Top, Center or Bottom |
| No Wrap | Don’t wrap columns |
| Container | Apply a maximum grid width |
| Setting name | Description |
| Default Column | Define the default column size when the layout is being added: Auto, 1/12, 2/12, 3/12, 4/12, 5/12, 6/12, 7/12, 8/12, 9/12, 10/12, 11/12, 12/12 |
| Allowed Columns | Define the allowed columns the user can choose |
in order to retrieve the Flexible Content Grid settings on the front-end, new dedicated helpers can be used: has_flexible_grid() get_flexible_grid() get_flexible_grid_class(). Usage example:
<?php if(has_flexible('flexible_content')): ?>
<div class="row <?php echo get_flexible_grid_class('flexible_content'); ?>">
<?php the_flexible('flexible_content'); ?>
</div>
<?php endif; ?>The get_flexible_grid_class() function will generate CSS class based on the Flexible Content settings. In this case it will generate:
align-center valign-stretch wrapPlease note that no actual CSS style is being added by ACF Extended on the front-end. Developers have to add their own style manually, depending on their need.
You can also retrieve the Grid settings using get_flexible_grid('flexible_content') which will generate an array of settings.
In order to retrieve the column size of each layouts, developers now have access to a new variable $col when using the Dynamic Render setting. It is also possible to retrieve the user column size using get_layout_col() or get_sub_field('acfe_layout_col').
Developers can then add the column size in the layout render. Usage example:
<?php
/*
* Hero Layout Render Template.
*
* @array $layout Layout settings (without values)
* @array $field Flexible content field settings
* @bool $is_preview True in Administration
* @string $col Column size (auto, 1, 2, 3, 4 ...)
*/
?>
<div class="layout-hero col-<?php echo $col; ?>">
<h1>Hero</h1>
<h3><?php the_sub_field('text'); ?></h3>
</div>Here is an example of the CSS style that can be added on the front-end in order to apply the correct flexbox property and columns width:
.row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.wrap{
flex-wrap: wrap;
}
.col-12{
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%
}
.col-11{
-webkit-box-flex: 0;
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%
}
.col-10{
-webkit-box-flex: 0;
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%
}
.col-9{
-webkit-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%
}
.col-8{
-webkit-box-flex: 0;
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%
}
.col-7{
-webkit-box-flex: 0;
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%
}
.col-6{
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%
}
.col-5{
-webkit-box-flex: 0;
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%
}
.col-4{
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%
}
.col-3{
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%
}
.col-2{
-webkit-box-flex: 0;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%
}
.col-1{
-webkit-box-flex: 0;
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%
}
.col-auto{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1
}
.align-center{
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.align-left{
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start
}
.align-right{
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end
}
.align-space-evenly{
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly
}
.align-space-between{
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.align-space-around{
-ms-flex-pack: distribute;
justify-content: space-around
}
.valign-stretch{
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch
}
.valign-top{
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
.valign-center{
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.valign-bottom{
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end
}