Question

我有一个2列布局，如下所示：

| --title-- | --content-- |

标题总是一个字，因此一行，但内容可以扩展为多行。当发生这种情况时，它会导致标题换行到第二行，从而破坏UI，如：

| --ti --- | | --cont- |

| --tle-- | | --ent-- |

我尝试了什么：给flex-wrap: no wrap标题，并给它一个宽度。但是，这仅适用于具有多行内容的情况，因此不必要地为与单行内容相邻的标题添加宽度。

他们的父母有以下CSS：

display: flex; width: 100%; align-items: flex-start; justify-content: space-between;

如何解决包装问题？

小提琴：https://jsfiddle.net/njcs30g9/7/ 您可以看到Child 2现在如何分为两行。

Answer 1

在孩子身上使用flex-shrink: 0会阻止它分裂。

有关flex-shrink的更多信息。

＆＃13;

.parent {
  display: flex;
  width: 100%;
  align-items: flex-start;
}
.child {
    flex-shrink: 0;
}

＆＃13;

<div class='parent'>
  <div class='child'>
    <span class='child-l'>Child</span>
    <span class='child-r'>2</span>
  </div>
  
  <div class='content'>
    These are multiple lines of content that expand into 2 lines and breaks the UI.
  </div>
</div>

＆＃13;

Flex布局 - 包含2列布局的文本换行问题

1 个答案: