Positioning and Flex

[Ivory]

Seemingly missing from either the Blocs Academy tutorials or the Knowledge Base is any information regarding several categories in the Class Editor. Of particular mystification to me are explanations for the various options in both the Positioning and Flex tabs.

Specifically, in Positioning, what do all the choices in Position mean? Choices in Float? Display?

In Flex Container, Align and Justify are fairly straightforward, but what does Direction mean in this context?

What is a Flex Child?

I am wondering where this information is available, if @Norm, it might be added to Blocs Academy or Knowledge Base, or if @Eldar might apply his significant pedagogical skills to the task.

[PeteSharp]

I did a video explaining the basics of Flex when it first came out. Older video now, but it’s still valid

Flex box margins/padding

I did a video just after Blocs 4 came out explaining the basics of flex. It may help. Probably need to update this one at some stage. [Blocs 4 - Flex Overview in the Class Editor]

[mliving]

Hey Pete

I followed your Flex video and I am unable to get the same results as shown in the video:

First I can’t get my Card’s properties don’t match yours. I’m assuming you set the card class to the Card.

Second, when I try and set ml-auto or mr-auto to the flex container near the end of the video nothing happens. mt-auto works fine.

I’ve been struggling to figure out Flex and the Positioning dialogue in general and would really appreciate assistance.

The Bloc documentation doesn’t explain the Positioning or Flex options very well.

Thanks
M@

[PeteSharp]

@mliving

when I try and set ml-auto or mr-auto to the flex container near the end of the video nothing happens.

Hi @mliving

That was an older version of bootstrap. There has been changes since then. So…

ml-* (margin left)
mr-* (margin right)

Has now been changed to

ms-* (margin start)
me-* (margin end)

Top and bottom are the same still.

You can also use auto as a value in the class editor for the margins.

[mliving]

Thank you very much Pete.

Greatly appreciate it!