Align 2 flex items - one to the left and one centered, but have the same baseline

Asked May 09 '21 at 11:59

Active May 09 '21 at 12:20

Viewed 31 times

Here is a visualization: The red needs to always stay in the left corner. The green can grow or shrink, but it has to be always centered. The green and red have to share the same baseline, i.e. regardless of red's height, green stays at the bottom.

I can make them stay on the baseline using align-items, but I can't figure out how to center the green without moving the red. Red can't use position: absolute because then green can't find the baseline.

This is how I currently have it, but this moves red to the center, right next to green. However, if I do justify-content: flex-start, then I can't center green.

container {
    display: flex;
    justify-content: center;
    align-items: baseline;
    position: fixed;
    left: 0;
    right: 0;
}

red {
    max-width: 10%;
}


green {
    display: inline-flex;
}

edited May 09 '21 at 12:08

asked May 09 '21 at 11:59

Ansis Spruģevics

Margin and: nth-child/last-child can help. You should post your HTML an CSS to demonstrate your issue . So one can efficiently help ;) – G-Cyrillus May 09 '21 at 12:02
@G-Cyrillus Thanks, I added example code. – Ansis Spruģevics May 09 '21 at 12:08
1

Can we also see your HTML structure ? – G-Cyrillus May 09 '21 at 12:16
In flexbox-elements you can use `margin: 0 auto;` to center the green element. See example: [https://jsfiddle.net/74qgskzy/](https://jsfiddle.net/74qgskzy/) – Atomkind May 09 '21 at 12:22
... here is an example of the idea ;) https://jsfiddle.net/vL84wdun/ – G-Cyrillus May 09 '21 at 12:25
@Atomkind this centers green relative to the right edge of red. I want to center green relative to the container, not red. – Ansis Spruģevics May 09 '21 at 12:28
@AnsisSpruģevics so just add position relative to container and absolute to red .. see [https://jsfiddle.net/v91fpg4q/](https://jsfiddle.net/v91fpg4q/) – Atomkind May 10 '21 at 09:43

Align 2 flex items - one to the left and one centered, but have the same baseline

0 Answers0