Content Flex Layout V2 Button

[hardimanja]

Hello, I am trying to understand the use of Content Flex Layout in V2 buttons. It does not seem to do anything - I am obviously doing something wrong. I do understand FlexBox and am comfortable with it in the Header and Footer builders. I see that FlexBox has not been built into Sections, Rows and Columns or most V2 Elements but it is available in Buttons. I have searched the support forms and cannot find a guide. Please explain the use or point me to a source. Thanks. Jim

[rad]

Hi there,

Thanks for posting in.

Please ignore that options, it’s there since it’s the same elements being used in the header and footer buttons. Plus, flex setting is in connection with its parent/container that has flex setting too. Which in content builder, it’s not applicable.

Thanks.

[theapricot]

So does Flex not work in the new Pro Content editor? Is it just in the Header and Footer?

[kory]

Howdy, @hardimanja and @theapricot!

Thanks for writing in! I believe there might have been some initial confusion on @Rad’s part regarding the question. He was referencing flex layouts within Sections for the Content Builder, but it seems to me that you are instead asking about what the Content Flex Layout control within the v2 Button Element itself does. With that assumption in mind, allow me to provide an explanation for you.

The Content Flex Layout control within the button controls the flex layout of the button content area. That being said, it will not appear to do anything unless you have the optional Graphic enabled for the Button. This is because the v2 Button’s content is broken down like so:

<a class="x-anchor">
  <span class="x-anchor-content">
    <span class="x-graphic"> ... </span> <!-- optional -->
    <span class="x-anchor-text"> ... </span> <!-- contains primary and secondary text -->
  </span>
</a>

The Content Flex Layout control applies flexbox layouts to the .x-anchor-content tag. As we can see above, if the optional Graphic is turned off you won’t see any effect on the layout because only the text will be present so there’s nothing relative to it to see things move around. However, once we turn on the Graphic, we can start to see this control take shape. When the graphic is initially enabled, it should appear like so:

If we return to our Content Flex Layout control and keep the Layout as Row but instead enable the Reverse Layout checkbox, you will see the following:

Next, if we go to a standard Column layout, we’ll see the following:

And finally, if we select the Reverse Layout checkbox while in the Column layout, we’ll see the following:

Beyond that, we can use the Horizontal and Vertical alignment controls to layout these two primary elements (Graphic and Text) across each axis within the Button itself.

Keep in mind that with the way the default button style is setup, the margin applied to the Graphic makes all these layout changes have a good amount of whitespace between the Text and Graphic. However, you will always want to make sure to adjust margins on your Text or Graphic appropriately to get the exact look you want as you shift the layout around within the button.

Hopefully that helps to make things a bit more clear, cheers!

[hardimanja]

Thanks - that helps.

[rad]

You’re most welcome!