Flexbox - aligning the third item in relation to second-CodePudding

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.

How I want my alignment

This is what I am doing

.box {
display: flex;
justify-content: flex-start;

}

.flex-second-item {
align-self: center;
flex-grow: 1
}

CodePudding user response：

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 ></div>
  <div >
    <div ></div>
    <div ></div>
  </div>
 </body>

Hope it helps. Regards

CodePudding user response：

You can wrap second and third item in a div, and you display flex them with align-items=flex-start.

So you may try :

.first-box-and-div-which-contains-second-and-third-boxes {
display: flex;
align-items: center;
}

.second-and-third-boxes {
display: flex;
align-items: flex-start;
}