Page 1 of 1

Flex Container centering in browser

Posted: Thu Mar 16, 2023 1:08 pm
by terryfoster60
I am trying to center the contents of my page.

I have tried a flex container onits own.
I cannot get it to center - always justifies left.

I have tried a flex grid
I put the contents in a flex container in the grid
It will not align center.

I have browsed the forum but cannot see how to center a flex layout on browser

Please advise.

Re: Flex Container centering in browser

Posted: Thu Mar 16, 2023 1:24 pm
by crispy68
The positioning of objects in a flex container is determined by what you set the properties to for the flex container. If you have Flex Direction set to 'row' then 'justify-content=center' will center the objects in the container horizontally. If it is set to column, then 'justify-content=center' centers them vertically.

If you are not familiar with Flexbox, then I find this tutorial to be very helpful.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexgrid in itself is a flex container. No need to insert a flex container into flexgrid.

Re: Flex Container centering in browser

Posted: Thu Mar 16, 2023 1:37 pm
by terryfoster60
Ah thank you.

Actually if I place an image into the flex container it DOES center automatically.

However I am trying to add an embedded page (which is my header) into the flex container

This is justifying LEFT.

Re: Flex Container centering in browser

Posted: Thu Mar 16, 2023 1:40 pm
by crispy68
Why not put the flex container on your embedded page where the header is already at? You may be better off using master frames instead if you are trying to create a header inside a flex container that is to be used on multiple pages.

Re: Flex Container centering in browser

Posted: Thu Mar 16, 2023 2:03 pm
by terryfoster60
There are many objects on the embedded header page.

I have a header page which has all the elements positioned on it for different breakpoints.
This works OK.
However If I place these in a flex layout grid then the objects all left align.

Let me explain please...
I have an embedded header object at the top of the page
I then need flexible space underneath.
At the bottom I have another embedded page acting as a footer.

I have been so far 8 hours (starting at 6am) on this and getting nowhere.

I HAVE TRIED...
Flex container at the top and load the embedded header page into it.
Flex layout underneath this where I can load my in-page items.
Flex container underneath to load embedded FOOTER page.

Now this all works fine, except that everything is left aligned.

I have looked on this page to see where I can upload a demo project but I cannot see anywhere...
Grateful for any advice... I'm nearly bald and still pulling my hair out!

Re: Flex Container centering in browser

Posted: Thu Mar 16, 2023 2:05 pm
by crispy68
Feel free to send me a copy of your demo project file (.wbs) to ron@wizbangwebdesign.com and I can take a look at it for you.

Re: Flex Container centering in browser

Posted: Thu Mar 16, 2023 2:58 pm
by terryfoster60
did you get the email - I sent two but received one message back from mail delivery system
Bad destination host "DNS Hard Error looking up wizbangwebdesign.com

Re: Flex Container centering in browser

Posted: Thu Mar 16, 2023 3:09 pm
by crispy68
Yes, i got your email. I'll take a look and report back to you as soon as I can. Enjoy your coffee! :lol: