Aligning image text and subtext using flex

Question

I am trying to align a image text and subtext in a div. I am able to achieve but i don't know how to position the image exactly to the title, now the image is starting from the subtext and image height increases when text content is more.

What i am trying to achieve is left side image vertically start align with title and below that text and the image should not stretch on height.

.card-wrapper {
  flex-direction: row;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  display: flex;
}

.img-wrapper {
  box-sizing: border-box;
  width: 100%;
  padding-right: 24px;
}

.img-wrapper>img {
  width: 100%;
  height: 80px;
}

.text {
  box-sizing: border-box;
  flex: 1 1 auto;
}

.text>p {
  margin: 0;
}

<div className="card-container">
  <div class="card-wrapper">
    <div class="img-wrapper">
      <img src="https://i.picsum.photos/id/460/200/300.jpg?hmac=ZPCe3djambX5E8sSU4PD0iOiqnK-oWfilPTycsWWvCM" />
    </div>
    <div class="text">
      <strong class="text-title">Title</strong>
      <p class="text-description">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
        industry's standard dummy text ever since the 1500s,
        
      </p>
    </div>
  </div>
</div>

Does this answer your question? [In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?](https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties) — biberman, May 06 '21 at 08:08

score 0 · Answer 1 · answered May 06 '21 at 08:02

If I got it right then you might be looking for something like this.

Instead of using align-items: center which aligns all the items center(vertically) you can use flex-start basically meaning it will move the image stick to the top of the div.

.card-wrapper {
  flex-direction: row;
  box-sizing: border-box;
  align-items: flex-start;
  justify-content: center;
  display: flex;
}

.img-wrapper {
  box-sizing: border-box;
  width: 100%;
  padding-right: 24px;
}

.img-wrapper>img {
  width: 100%;
  height: 80px;
}

.text {
  box-sizing: border-box;
  flex: 1 1 auto;
}

.text>p {
  margin: 0;
}

<div className="card-container">
  <div class="card-wrapper">
    <div class="img-wrapper">
      <img src="https://i.picsum.photos/id/460/200/300.jpg?hmac=ZPCe3djambX5E8sSU4PD0iOiqnK-oWfilPTycsWWvCM" />
    </div>
    <div class="text">
      <strong class="text-title">Title</strong>
      <p class="text-description">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
        industry's standard dummy text ever since the 1500s,
        
      </p>
    </div>
  </div>
</div>

@ Chipsy, if i increase the content the image is getting stretching, is there any way — dev, May 06 '21 at 08:36
@JohnThomas Remove your width: 100% from .img-wrapper and also remove it from the img. Because you are giving your img a fixed value height and width. You need to keep either as auto so that it doesn't lose its aspect ratio. https://prnt.sc/12krmhn — Chipsy, May 06 '21 at 12:55

score 0 · Answer 2 · answered May 06 '21 at 08:03

To position the image at the top, change align-items from center to flex-start (or remove it altogether since it's the default).

.card-wrapper {
  align-items: flex-start;
}

In order to retain the image aspect ratio, add align-self:

img {
  align-self: center;
}

See documentation: align-self and align-items.

Aligning image text and subtext using flex

2 Answers2