flexbox内的自动换行不起作用答案

【问题标题】：word-wrap inside flexbox not workingflexbox内的自动换行不起作用
【发布时间】：2017-09-19 09:26:41
【问题描述】：

我用的是flexbox，每个item下面都是图片和文字。我需要使所有图片的高度相同（宽度可能会有所不同）和要换行的文本，这样它就不会扩展项目。

但我设法仅使用合理的宽度而不是高度启用自动换行。

注意：我需要证明图片，而不是项目。

.wrapper1,
.wrapper2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.flex-item {
  margin: 5px;
  background-color: #ddd;
}

.wrapper1 .flex-item {
  width: 150px;
}

.flex-item p:last-child {
  margin-bottom: 0;
}

.card-image {
  width: 100%;
}

.card-body {
  padding: 7px;
  word-wrap: break-word;
}

.wrapper2 .flex-item {
  width: auto;
}

.wrapper2 .card-image {
  height: 231px;
  width: auto;
}

<div class="wrapper1">
  <div class="flex-item">
    <a href="/comics/novathekeep" title="Нова: Цитадель"><img src="http://warcry.ru/comics/pages/thumb/51.jpg" class="card-image" /></a>
    <div class="card-body">
      <p><a href="/comics/novathekeep">Нова: Цитадель</a></p>
    </div>
  </div>
  <div class="flex-item">
    <a href="/comics/artanissacrifice" title="Артанис: Великая жертва"><img src="http://warcry.ru/comics/pages/thumb/303.jpg" class="card-image" /></a>
    <div class="card-body">
      <p><a href="/comics/artanissacrifice">Артанис: Великая жертва</a></p>
    </div>
  </div>
  <div class="flex-item">
    <a href="/comics/kerriganhopeandvengeance" title="Керриган: Надежда и мщение"><img src="http://warcry.ru/comics/pages/thumb/41.jpg" class="card-image" /></a>
    <div class="card-body">
      <p><a href="/comics/kerriganhopeandvengeance">Керриган: Надежда и мщение</a></p>
    </div>
  </div>
</div>

<div class="wrapper2">
  <div class="flex-item">
    <a href="/comics/novathekeep" title="Нова: Цитадель"><img src="http://warcry.ru/comics/pages/thumb/51.jpg" class="card-image" /></a>
    <div class="card-body">
      <p><a href="/comics/novathekeep">Нова: Цитадель</a></p>
    </div>
  </div>
  <div class="flex-item">
    <a href="/comics/artanissacrifice" title="Артанис: Великая жертва"><img src="http://warcry.ru/comics/pages/thumb/303.jpg" class="card-image" /></a>
    <div class="card-body">
      <p><a href="/comics/artanissacrifice">Артанис: Великая жертва</a></p>
    </div>
  </div>
  <div class="flex-item">
    <a href="/comics/kerriganhopeandvengeance" title="Керриган: Надежда и мщение"><img src="http://warcry.ru/comics/pages/thumb/41.jpg" class="card-image" /></a>
    <div class="card-body">
      <p><a href="/comics/kerriganhopeandvengeance">Керриган: Надежда и мщение</a></p>
    </div>
  </div>
</div>

Fiddle

第一个 flexbox 有相同宽度的项目（自动换行），第二个 flexbox 有相同高度的项目（自动换行不起作用）。

【问题讨论】：

是浏览器特有的问题吗？？
至少我需要它在 Chrome 中工作。
好的，一列总是有 3 行，否则会有所不同？
这个 flexbox 应该自动包装它的项目（这就是我使用 flexbox 的原因）。根据分辨率，它连续包含 2-5 个项目。

标签： html css flexbox word-wrap

【解决方案1】：

你必须指定 max-width 或 flex-basis 属性

.wrapper2 .flex-item {
    flex: 0 1 150px;
}

或

.wrapper2 .flex-item {
    max-width: 150px;
}

【讨论】：

自动换行有效，但项目变得凌乱。所以这不是一个可以接受的解决方案。

【解决方案2】：

我认为这对你有用，试一试并告诉我。

.wrapper2 .card-image {
    height: 231px;
}

检查这个fiddle

【讨论】：

与之前的答案一样，它可以使自动换行工作，但会破坏卡片的布局。
抱歉我忘了更新它现在我已经更新了我的小提琴你可以检查一下我猜这就是你想要的。
谢谢，Pyramid 先生，但是在固定宽度和固定高度的情况下，有些图像会失真（就像中间的那样），我想保持比例。理想的结果将是具有固定高度和保留比例（因此它们可以变得比平常更宽）和自动换行文本的图像。
这是我想要实现的示例 + 自动换行文本（此页面上的文本不换行）：warcry.ru/comics/series/curseoftheworgen/4
好的，我检查了您的参考资料，您可以看到它们的固定高度为 (231px)，宽度设置为自动，同样您希望保留比例，然后将高度设置为自动或将您的宽度设置为自动，那么它将始终保留您当前正在弄乱高度和宽度的比例，这就是您遇到比例问题的原因