Flex Container centering in browser

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
terryfoster60
 
 
Posts: 58
Joined: Wed Sep 19, 2018 8:39 am

Flex Container centering in browser

Post 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.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flex Container centering in browser

Post 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.
terryfoster60
 
 
Posts: 58
Joined: Wed Sep 19, 2018 8:39 am

Re: Flex Container centering in browser

Post 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.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flex Container centering in browser

Post 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.
terryfoster60
 
 
Posts: 58
Joined: Wed Sep 19, 2018 8:39 am

Re: Flex Container centering in browser

Post 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!
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flex Container centering in browser

Post 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.
terryfoster60
 
 
Posts: 58
Joined: Wed Sep 19, 2018 8:39 am

Re: Flex Container centering in browser

Post 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
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flex Container centering in browser

Post 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:
Post Reply