First flexbox – how do I line up the images?

[kudzujungle]

I’m working on a Joomla site using Gantry 5 and their default Hydrogen template. They don’t have an option for me to put a global header in that I can share across several platforms. Since my domain is not just Joomla, I need to use one header that I can include with various templates.

I need the images to line up in row, and centered even though the logo is bigger than the social icons. I want the logo on the far left and the icons on the far right. I can do that in a table, but what I discovered is that people are making their sites different for smaller screens. (I’m way behind!) When I use a table, the icons on the right don’t slide to fit a small screen. I need them slide to the left as the screen gets smaller, until they line up in a row under the logo. Instead, they are all in a column.

I just learned about flex boxes a few days ago and I can’t figure out how to finish my global header file. Can anyone help me?

Here’s my code: https://codepen.io/kudzujungle/pen/ZLxKmP

I have the links hard coded in because I don’t know any other way to do it when this header will be pulled into different sites. The domain is a temporary one until I set up the live site, then I’ll change the links from the dev to live domain.

[kudzujungle]

This is what I’m trying to make the header look like. I made this in a graphics program.

http://joomla.kudzujungle.com/global/global-header.gif

[shlbam]

Here is my pen with what you want: https://codepen.io/shlbam/pen/YNaLgo

You were close.

In order for flexbox to work, the parent flex container needs children to work with. You seemed to have miss placed a div
and the second child (iconsSocial) was nested inside the child (iconsLogo). So your parent div (logoWrapper) was only affecting one child.

In your css you just needed to change it to:

justify-content: space-between;

and this will give you the split effect you are looking for.

You can picture flexbox working like this:
logoWrapper(parent)
—-iconsLogo(child)
—-iconsSocial(child)

And the parent has certain properties that effect the children.

[kudzujungle]

Brilliant! Thank you so much. That’s exactly like the image I posted as a reference.

[Author]

Posts