scss and flexbox with logos in two different layouts

Question

I am runnning across an issue in which I am not sure how to solve.

I have a grid system doing the following, BUT I will do a standard "div" solution. But here is my dilemna.

I have a "LogoComponent" That displays my companies logo on the left, and a partner's logo on the right.

I have two headers that display in two different conditions.

Centered Display (just the logos)
Left Aligned Display (left aligned logos, with other content on the right)

Caveats: the "partner logo" needs to confine within the div/space as sometimes the svg's are large, so I "can" offer a height, but not a width.

The image shows the two views. The "LogoComponent" I am having an issue as I was using a flexbox, but not sure that is gonna work since why I try to make it "left" as a component, it moves off the container div. Any ideas how to solve this?

I can solve it, but I feel it will be too generalized, as I'm looking to make this "LogoComponent" be wide enough for the logos, and then appropriately resize if the partner logo is there or not.

Amaury Hanser · Answer

As said in the comment, you can center LogoComponent using margin: 0 auto; when it's the :only-child.
If it's not the only child, using margin-right: auto; will push all other content to the right as we are in a flex container.

.parent {
  display: flex;
}

.LogoComponent {
  margin-right: auto;
}

.LogoComponent:only-child {
  margin: 0 auto;
}

/* for styling only */
.LogoComponent {
  width: 50px;
  height: 50px;
  background-color: lightblue;
}

/* for styling only */
.OtherContent {
  min-width: 200px;
  background-color: lightgreen;
}

scss and flexbox with logos in two different layouts

1 Answers