Archived topic
Center content in flexbox
3 replies · Started by Yannick on March 22, 2023
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 :)
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.
Hey david,
thanks for your explanation it worked!
You're welcome
