Flexbox Issue of logo not staying left

[AshleyF]

Hello,

I have a top header row with the main container set to Flexbox End, because all the links should be right aligned. I then set the logo image element to margin left 0 so my logo is always on the far left of the row. That worked with image set to object fit of fill with a maximum width. But that causes me some scaling issues.

I tried setting to maximum height and selecting object fit of scale, which works, other than the image is centralised and the margin left 0 is not respected.

Is that how it’s meant to work? Will margin left 0 only work with the object set to fill?

[prakash_s]

Hello Ashley,

Thanks for writing to us.

Since you have set the Align Horizontal as End that would set all the child elements to the right side. There are also some elements already placed in the container that is why it looks like the logo is aligned in the center. To align the logo you have to set the margin-left as 0 that is going to work for you.

Thanks

[AshleyF]

Hi,

Yes I understand that, but that doesnt seem to work if I try and set a maximum height and set object to scale down.

The left 0 setting is only respected if I set maximum logo width and object to fill.

I just wondered if it was meant to work with a maximum height set and a scale down object.

[ruenel]

Hello Ashley,

You have all this difficulty because you have placed the logo image and the navigation elements in one single container. It is much easier to control if you two containers. One container will be for the left side and the other is for the right side. With this layout, you will have full control of the flexbox on each of the containers.

Hope this makes sense.