I have three flex items all with different height and different widths.
I want the second and third items to be in relation to the first.
My first item is a image, second a text, third another text
I want my second item to be at the center of the flex box and the third to be at the start of second item. I also want the second item to grow and cover the rem area.
This is what I am doing
.box {
display: flex;
justify-content: flex-start;
}
.flex-second-item {
align-self: center;
flex-grow: 1
}
>Solution :
You just need to use different flexboxes for them
body {
display: flex;
gap: 10px;
align-items: center;
}
.one {
width: 100px;
height: 100px;
background: red;
}
.right-side {
display: flex;
gap: 10px;
}
.two {
width: 75px;
height: 75px;
background: red;
}
.three {
width: 50px;
height: 50px;
background: red;
}<body>
<div class="one"></div>
<div class="right-side">
<div class="two"></div>
<div class="three"></div>
</div>
</body>Hope it helps.
Regards