Flex 项目在其中的文本换行时改变宽度答案

【问题标题】：Flex items change width when the text inside them wrapsFlex 项目在其中的文本换行时改变宽度
【发布时间】：2018-04-05 17:38:00
【问题描述】：

我正在尝试格式化一系列警告消息。每条消息都是一个由 3 个 flex 项组成的 flexbox：一个小色环（i 标签），然后是 2 个 p 标签，其文本根据警告的不同而不同。我希望它们都左对齐，第一个 p 和第二个 p 之间的间距一致。

问题是当其中一个 p 元素中有换行符时（当警告标题或描述变得太长时），整个 p 元素的宽度会发生变化并超出文本的右边缘，从而导致左右 p 标签之间的大空白。

Hopefully this image will describe the issue better. The first 4 lines are fine, but on line 5 there is too much space because the width of the first p element expanded.

.warnings {
  width: 600px;
}

.warning {
  display: inline-flex;
  align-items: baseline;
}

<div class="warnings">
  <div class="warning">
    <i class="fa fa-circle"></i>
    <p class="type">Warning type</p>
    <p class="description">Warning description text goes here</p>
  </div>
  <div class="warning">
    <i class="fa fa-circle"></i>
    <p class="type">Short Warning type</p>
    <p class="description">Warning description text goes here</p>
  </div>
  <div class="warning">
    <i class="fa fa-circle"></i>
    <p class="type">Very long warning looks like this</p>
    <p class="description">Warning description text goes here</p>
  </div>
  <div class="warning">
    <i class="fa fa-circle"></i>
    <p class="type">Warning type</p>
    <p class="description">Warning description text goes here and on and on and on and on and on and on</p>
  </div>
</div>

【问题讨论】：

你试过white-space: nowrap吗？
查看此代码笔codepen.io/anon/pen/XExdwo。
我确实希望文本能够换行。只是当它换行时，我希望项目的边缘正好靠在文本的边缘。感谢您的回复！
哦，那很简单，看我的回答:)

标签： html css flexbox word-wrap

【解决方案1】：

将flex-shrink: 3 设置为应该比其他收缩更多的项目。这将使项目尽可能地缩小。

.warnings { width: 600px; }
.warning { display: inline-flex; align-items: baseline; }

body {
  font-family: sans-serif;
}

p.description {
  font-weight: bold;
}

.type {
  margin: 0 5px;
  flex-shrink: 3;
}

<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
<div class="warnings">
    <div class="warning">
        <i class="fa fa-circle"></i>
        <p class="type">Warning type</p>
        <p class="description">Warning description text goes here</p>
    </div>
    <div class="warning">
        <i class="fa fa-circle"></i>
        <p class="type">Short Warning type</p>
        <p class="description">Warning description text goes here</p>
    </div>
    <div class="warning">
        <i class="fa fa-circle"></i>
        <p class="type">Very long warning looks like this</p>
        <p class="description">Warning description text goes here</p>
    </div>
    <div class="warning">
        <i class="fa fa-circle"></i>
        <p class="type">Warning type</p>
        <p class="description">Warning description text goes here and on and on and on and on and on and on</p>
    </div>

【讨论】：

这绝对是更接近了！谢谢！你写的sn-p看起来不错。但是，当应用于我正在处理的页面时，有足够的变量仍然存在空白。我不知道如何在此评论中发布图片，但基本上问题仍然存在。有时，第二个弹性项目中只有大量的额外空间。

【解决方案2】：

我在p 上使用flex 时遇到了类似的问题。我发现的解决方法是将 p 元素包裹在另一个 div 中，并且宽度正确。

我认为当 p 元素变大时，尽管有自动换行，flex 认为它是一个更大的元素并缩小其他元素

【讨论】：