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

Posted 2023-03-05

【中文标题】带有文本的显示弯曲问题[重复]

【英文标题】：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

【参考方案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