Flexbox – aligning the third item in relation to second

Advertisements

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
}

>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

Leave a ReplyCancel reply