带有文本的显示弯曲问题[重复]答案

【问题标题】：Issue in display flex with text [duplicate]带有文本的显示弯曲问题[重复]
【发布时间】：2019-12-15 22:45:05
【问题描述】：

我有一个标题，左侧有标题名称，右侧有几个按钮。问题是，标题名称在最后一个空格处分成两行。我有以下代码，这是因为.right 类的宽度设置为继承。请参考代码。有什么办法不让文字分裂？

.parent {
  width: 100%;
  height: auto;
  display: flex;
  padding: 0.5rem 1rem;
}

.right {
  text-align: right;
  width: inherit;
}

<div class="parent">
  <!---->
  <h6>A B C D E</h6>
  <div class="right">
    buttons
  </div>
</div>

JSFiddle

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用flex-shrink 属性来实现您想要的。我删除了width:inherit 并使用了flex-grow 属性。我认为在这种情况下会更好。

flex-grow 定义了弹性项目在必要时增长的能力。它接受用作比例的无单位值。它规定了项目应占用的弹性容器内的可用空间量。

如果所有项目都将 flex-grow 设置为 1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为 2，则剩余空间将占用其他空间的两倍（或者至少会尝试）。

.parent {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
}

.right {
  text-align: right;
  flex-shrink: 0;
  flex-grow: 1;
}

h6 {
  flex-shrink: 0;
}

<div class="parent">
  <!---->
  <h6>A B C D E</h6>
  <div class="right">
    buttons
  </div>
</div>

【讨论】：

【解决方案2】：

您可以使用justify-content: space-between 在父容器中平均分配您的两个项目，如下所示：

.parent {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="parent">
  <h6>A B C D E</h6>
  <div class="right">
    buttons
  </div>
</div>

【讨论】：

【解决方案3】：

从 right 类中删除 width: inherit 并添加 margin-left:auto 以使其向右对齐

【讨论】：

【解决方案4】：

您可以通过将flex-grow: 1 分配给h6（标头名称）来简化代码。这将确保文本增长以填充行中最可用的空间。剩余空间将隐式分配给.right（按钮）。

/* default styles */
.parent {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;  
}

.parent h6 {
  flex-grow: 1;
}

<div class="parent">
  <h6>A B C D E</h6>
  <div class="right">
    buttons
  </div>
</div>

jsFiddle

【讨论】：