[Resolved] Center content in flexbox

[Yannick]

Hey Guys,

I really like the new upgrade of Generatepress. However i’m not that good with flexboxes. I have some content i need to be centered and i don’t know how to do it. Is there a good explanation of how to use flex boxes in generatepress?

I have a few examples maybe you guys can explain how i can fix it.

Question 1
I have a grid where the content needs to be aligned. I think this is possible with flex box.
https://prnt.sc/Vi0O69-pT5l2 (how i want it to be)

https://prnt.sc/qi_3k0WGimeo (how it is right now) the content should be lower and in the middle of the div.

Question 2
Allmost the same question the content needs to be pushed down so it has the same space on the top as well as on the bottom.
https://prnt.sc/CNMCrYhVeDM-

Question 3
The containers have to be the same height so the border is aligned equally.
https://prnt.sc/OkIK1BJP2Xb4

Url: https://ontwikkeling.ybrand.nl/

I hope you guys can help me, really struggling with the flex boxes and content rn. Thanks a lot 🙂

[David]

Hi there,

lets try this for exampleL

1. Add a Container Block for the section.
2. Insert the Inner Container:
https://docs.generateblocks.com/article/add-inner-container/

3. Se you background and padding. etc.
4. with the Inner Container Block selected, Set its Layout > Flex

For questions 1 and 2:

1. Set its Layout > Flex Wrap -> Wrap
2. Set its Layout > Align Items -> Flex End ( bottom ) icon.

Now inside the inner Conatiner, add 3 x Container Blocks.
Container 1 and Container 2 set there widths to define two columns eg. 30% and 70%
Container 3 its width should be 100% so it forms its own Row.

Now populate container 1 and 2 with your content. You will see that the Align Items -> Flex End ( bottom ) will position the two containers to the bottom.

For question 3, same height columns now require you to set the Sizing > Height to 100% on the container.

[Yannick]

Hey david,

thanks for your explanation it worked!

[David]

You’re welcome

[Author]

Posts