Flex Block Type

ACF Engine believes that sometimes we shouldn’t shy away from the fact that blocks are rendering HTML and of course, relying on CSS for their design and purpose.

That’s why we created the Flex Block Type so that you can drop in a single HTML tag with a display as flex CSS class automatically attached to it. Flex blocks support inner blocks and serve as an alternative to WP Core Blocks like rows, columns and stacks.

This is a WP Core Heading block

This is a WP Core Paragraph block. We are flexed with display: flex CSS.

As you may notice in the example above the alignment doesn’t quite look right, we’d probably vertically center content like that in most cases, but that’s the default alignment as the Flex Block Type does not automatically handle presume what your content is or how it should be displayed. You can use Tailwind CSS alignment classes such as “align-center” to improve the layout as shown below.

This is a WP Core Heading block

This is a WP Core Paragraph block. We are flexed with display: flex CSS. We are aligned vertical center using Tailwind CSS class “items-center”.

The demo above also had “gap-8” added to the flex container to ensure gap, even though it may not appear to need it due to the line breaks in the text. In the next example we address the relative sizing of the columns by applying a width Tailwind CSS class to the heading.

This is a WP Core Heading block

This is a WP Core Paragraph block. We are flexed with display: flex CSS. We are aligned vertical center using Tailwind CSS class “items-center”.