Using a flex container, how can I give a child image its full width while right aligning all of the flex children?

huangapple go评论99阅读模式
英文:

Using a flex container, how can I give a child image its full width while right aligning all of the flex children?

问题

我试图实现这种布局,其中有一张图片,它具有固定的宽度,如果旁边的文本太长,则文本会被截断。我还希望 flex 容器的内容右对齐。

我一直在 https://codepen.io/zeckdude/pen/jOQeRoZ 上进行尝试,当我在段落上设置 flex: 1 以确保图片获得其全宽时,我无法弄清楚如何仍然将所有内容右对齐。不幸的是,我仍然得到了这个结果:

以下是我在 CodePen 中的代码:

  1. .container {
  2. display: flex;
  3. flex-direction: column;
  4. gap: 16px;
  5. width: 300px;
  6. padding: 16px;
  7. background-color: gray;
  8. }
  9. hr {
  10. width: 100%;
  11. }
  12. .flex-container {
  13. display: flex;
  14. align-items: center;
  15. justify-content: flex-end;
  16. gap: 16px;
  17. width: 100%;
  18. }
  19. /* 使图像容器占据 50px 宽度 */
  20. .flex-container .image-container {
  21. width: 50px;
  22. height: 50px;
  23. border-radius: 25px;
  24. overflow: hidden;
  25. }
  26. /* 使图像占据图像容器的全宽和全高 */
  27. .flex-container img {
  28. width: 100%;
  29. height: 100%;
  30. object-fit: cover;
  31. }
  32. /* 当空间不足时,使文本截断并显示省略号 */
  33. .flex-container p {
  34. flex: 1;
  35. white-space: nowrap;
  36. overflow: hidden;
  37. text-overflow: ellipsis;
  38. }
  1. <div class="container">
  2. <div class="flex-container">
  3. <div class="image-container">
  4. <img src="https://picsum.photos/id/64/200" alt="Image">
  5. </div>
  6. <p>在这里放置您的长文本,可以一直延续很长时间</p>
  7. </div>
  8. <hr />
  9. <div class="flex-container">
  10. <div class="image-container">
  11. <img src="https://picsum.photos/id/64/200" alt="Image">
  12. </div>
  13. <p>短文本</p>
  14. </div>
  15. </div>

一些人建议移除 .flex-container p 上的 flex: 1,但不幸的是,我需要它以确保图像获得其全宽。您可以看到我已将其移除并且图像看起来不正确的屏幕截图:

英文:

I'm trying to achieve this layout where there is an image that is a set width and the text next to it is truncated if it is too long. I also want the content of flex container to be right aligned.

Using a flex container, how can I give a child image its full width while right aligning all of the flex children?

I have been playing with this at https://codepen.io/zeckdude/pen/jOQeRoZ and when I set flex: 1 on the paragraph in order to ensure that the image gets its full width, I can't figure out how to still right align all of the content. Unfortunately, I still end up with this result:

Using a flex container, how can I give a child image its full width while right aligning all of the flex children?

Here's the code that I have in the codepen:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .container {

display: flex;
flex-direction: column;
gap: 16px;
width: 300px;
padding: 16px;
background-color: gray;
}

hr {
width: 100%;
}

.flex-container {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
width: 100%;
}

/* Make the image container take 50px width */
.flex-container .image-container {
width: 50px;
height: 50px;
border-radius: 25px;
overflow: hidden;
}

/* Make the image take its full width and height within the image container */
.flex-container img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Make the text truncate with ellipsis when there's not enough space */
.flex-container p {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

<!-- language: lang-html -->

  1. &lt;div class=&quot;container&quot;&gt;

<div class="flex-container">
<div class="image-container">
<img src="https://picsum.photos/id/64/200" alt="Image">
</div>
<p>Your long text goes here and can keep going for a long time</p>
</div>

<hr />

<div class="flex-container">
<div class="image-container">
<img src="https://picsum.photos/id/64/200" alt="Image">
</div>
<p>Short text</p>
</div>
</div>

<!-- end snippet -->

Some folks have suggested removing the flex: 1 on the .flex-container p but unfortunately I need that there in order to ensure that the image gets to take its full width. You can see that in this screenshot where I have removed it and the image isn't looking correct:

Using a flex container, how can I give a child image its full width while right aligning all of the flex children?

答案1

得分: 1

这是一个不同的解决方案,因为这些内容是动态的。我所做的更改如下:

  1. .flex-container .image-container {
  2. /* overflow: hidden; */
  3. }
  4. .flex-container img {
  5. width: 50px;
  6. height: 50px;
  7. border-radius: 25px;
  8. }
  9. .flex-container p {
  10. /* flex: 1; */
  11. }
  1. <div class="container">
  2. <div class="flex-container">
  3. <div class="image-container">
  4. <div class="image-inner-container">
  5. <img src="https://picsum.photos/id/64/200" alt="Image">
  6. </div>
  7. </div>
  8. <p>Your long text goes here and can keep going for a long time</p>
  9. </div>
  10. <hr />
  11. <div class="flex-container">
  12. <div class="image-container">
  13. <div class="image-inner-container">
  14. <img src="https://picsum.photos/id/64/200" alt="Image">
  15. </div>
  16. </div>
  17. <p style="flex: initial;">Short text</p>
  18. </div>
  19. </div>
英文:

Here is a different solution as these contents are dynamic. The changes I have made:

  1. .flex-container .image-container {
  2. /* overflow: hidden; */
  3. }
  4. .flex-container img {
  5. width: 50px;
  6. height: 50px;
  7. border-radius: 25px;
  8. }
  9. .flex-container p {
  10. /* flex: 1; */
  11. }

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .container {
  2. display: flex;
  3. flex-direction: column;
  4. gap: 16px;
  5. width: 300px;
  6. padding: 16px;
  7. background-color: gray;
  8. }
  9. hr {
  10. width: 100%;
  11. }
  12. .flex-container {
  13. display: flex;
  14. align-items: center;
  15. justify-content: flex-end;
  16. gap: 16px;
  17. width: 100%;
  18. }
  19. /* Make the image container take 50px width */
  20. .flex-container .image-container {
  21. width: 50px;
  22. height: 50px;
  23. border-radius: 25px;
  24. /* overflow: hidden; */
  25. }
  26. /* Make the image take its full width and height within the image container */
  27. .flex-container img {
  28. width: 50px;
  29. height: 50px;
  30. border-radius: 25px;
  31. object-fit: cover;
  32. }
  33. /* Make the text truncate with ellipsis when there&#39;s not enough space */
  34. .flex-container p {
  35. /* flex: 1; */
  36. white-space: nowrap;
  37. overflow: hidden;
  38. text-overflow: ellipsis;
  39. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;container&quot;&gt;
  2. &lt;div class=&quot;flex-container&quot;&gt;
  3. &lt;div class=&quot;image-container&quot;&gt;
  4. &lt;div class=&quot;image-inner-container&quot;&gt;
  5. &lt;img src=&quot;https://picsum.photos/id/64/200&quot; alt=&quot;Image&quot;&gt;
  6. &lt;/div&gt;
  7. &lt;/div&gt;
  8. &lt;p&gt;Your long text goes here and can keep going for a long time&lt;/p&gt;
  9. &lt;/div&gt;
  10. &lt;hr /&gt;
  11. &lt;div class=&quot;flex-container&quot;&gt;
  12. &lt;div class=&quot;image-container&quot;&gt;
  13. &lt;div class=&quot;image-inner-container&quot;&gt;
  14. &lt;img src=&quot;https://picsum.photos/id/64/200&quot; alt=&quot;Image&quot;&gt;
  15. &lt;/div&gt;
  16. &lt;/div&gt;
  17. &lt;p style=&quot;flex: initial;&quot;&gt;Short text&lt;/p&gt;
  18. &lt;/div&gt;
  19. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 1

你可以通过对你的代码进行两个简单的调整来实现这个布局:

  1. .flex-container p {
  2. /* flex: 1; */ /* 您不需要这个 */
  3. white-space: nowrap;
  4. overflow: hidden;
  5. text-overflow: ellipsis;
  6. }
  7. .flex-container .image-container {
  8. width: 50px;
  9. height: 50px;
  10. border-radius: 25px;
  11. overflow: hidden;
  12. flex-shrink: 0; /* 新增; 禁用 flex-shrink */
  13. }
  1. .container {
  2. display: flex;
  3. flex-direction: column;
  4. gap: 16px;
  5. width: 300px;
  6. padding: 16px;
  7. background-color: gray;
  8. }
  9. hr {
  10. width: 100%;
  11. }
  12. .flex-container {
  13. display: flex;
  14. align-items: center;
  15. justify-content: flex-end;
  16. gap: 16px;
  17. width: 100%;
  18. }
  19. /* 让图像容器占据 50px 的宽度 */
  20. .flex-container .image-container {
  21. width: 50px;
  22. height: 50px;
  23. border-radius: 25px;
  24. overflow: hidden;
  25. flex-shrink: 0; /* 新增 */
  26. }
  27. /* 让图像在图像容器内占满整个宽度和高度 */
  28. .flex-container img {
  29. width: 100%;
  30. height: 100%;
  31. object-fit: cover;
  32. }
  33. /* 当空间不足时,使用省略号截断文本 */
  34. .flex-container p {
  35. /* flex: 1; */
  36. white-space: nowrap;
  37. overflow: hidden;
  38. text-overflow: ellipsis;
  39. }
  1. <div class="container">
  2. <div class="flex-container">
  3. <div class="image-container">
  4. <img src="https://picsum.photos/id/64/200" alt="Image">
  5. </div>
  6. <p>Your long text goes here and can keep going for a long time</p>
  7. </div>
  8. <hr />
  9. <div class="flex-container">
  10. <div class="image-container">
  11. <img src="https://picsum.photos/id/64/200" alt="Image">
  12. </div>
  13. <p>Short text</p>
  14. </div>
  15. </div>

你写道:

有些人建议在 .flex-container p 上删除 flex: 1,但不幸的是,我需要它来确保图像可以占据其全宽度。

flex容器的默认设置是 flex-shrink: 1。这意味着flex项目会自动缩小以避免溢出容器。为了确保图像遵守其定义的宽度,只需禁用 flex-shrink

英文:

You can achieve the layout with two simple adjustments to your code:

  1. .flex-container p {
  2. /* flex: 1; */ /* you don&#39;t need this */
  3. white-space: nowrap;
  4. overflow: hidden;
  5. text-overflow: ellipsis;
  6. }
  7. .flex-container .image-container {
  8. width: 50px;
  9. height: 50px;
  10. border-radius: 25px;
  11. overflow: hidden;
  12. flex-shrink: 0; /* new; disable flex-shrink */
  13. }

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

  1. .container {
  2. display: flex;
  3. flex-direction: column;
  4. gap: 16px;
  5. width: 300px;
  6. padding: 16px;
  7. background-color: gray;
  8. }
  9. hr {
  10. width: 100%;
  11. }
  12. .flex-container {
  13. display: flex;
  14. align-items: center;
  15. justify-content: flex-end;
  16. gap: 16px;
  17. width: 100%;
  18. }
  19. /* Make the image container take 50px width */
  20. .flex-container .image-container {
  21. width: 50px;
  22. height: 50px;
  23. border-radius: 25px;
  24. overflow: hidden;
  25. flex-shrink: 0; /* new */
  26. }
  27. /* Make the image take its full width and height within the image container */
  28. .flex-container img {
  29. width: 100%;
  30. height: 100%;
  31. object-fit: cover;
  32. }
  33. /* Make the text truncate with ellipsis when there&#39;s not enough space */
  34. .flex-container p {
  35. /* flex: 1; */
  36. white-space: nowrap;
  37. overflow: hidden;
  38. text-overflow: ellipsis;
  39. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;container&quot;&gt;
  2. &lt;div class=&quot;flex-container&quot;&gt;
  3. &lt;div class=&quot;image-container&quot;&gt;
  4. &lt;img src=&quot;https://picsum.photos/id/64/200&quot; alt=&quot;Image&quot;&gt;
  5. &lt;/div&gt;
  6. &lt;p&gt;Your long text goes here and can keep going for a long time&lt;/p&gt;
  7. &lt;/div&gt;
  8. &lt;hr /&gt;
  9. &lt;div class=&quot;flex-container&quot;&gt;
  10. &lt;div class=&quot;image-container&quot;&gt;
  11. &lt;img src=&quot;https://picsum.photos/id/64/200&quot; alt=&quot;Image&quot;&gt;
  12. &lt;/div&gt;
  13. &lt;p&gt;Short text&lt;/p&gt;
  14. &lt;/div&gt;
  15. &lt;/div&gt;

<!-- end snippet -->

You wrote:

> Some folks have suggested removing the flex: 1 on the
> .flex-container p but unfortunately I need that there in order to
> ensure that the image gets to take its full width.

A default setting on a flex container is flex-shrink: 1. This means that flex items will automatically shrink to avoid overflowing the container. To ensure that the image respects its defined width, just disable flex-shrink.

huangapple
  • 本文由 发表于 2023年7月28日 04:34:34
  • 转载请务必保留本文链接:https://go.coder-hub.com/76783242.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定