Question

我有下面的例子，我想在任何时候在一行上显示蓝色项目文本，无论我在里面有多少文字。（动态内容）基本上我希望当蓝色项目有更多文本时，红色项目的宽度变小。

有没有办法实现这个目标？

THX

PS。不要问为什么我在这里使用flex。我将它用于我需要它的一个更大的例子，这个例子是简化的。

＆＃13;

.flexbox {
  display: flex;
}
.red {
  background: red;
}   
.blue {
  background: blue;
}

＆＃13;

<div class="flexbox">
  <div class="red">red red red red red red red red red red red red red red red red  red red red red red red </div>
  <div class="blue">blue blue blue blue blue</div>
</div>

＆＃13;

Answer 1

您可以在蓝色部分使用flex-shrink:0 ^ref：

.flexbox {
  display: flex;
  margin:10px;
}
.red {
  background: red;
}   
.blue {
  background: blue;
  flex-shrink:0;
}

<div class="flexbox">
  <div class="red">red red red red red red red red red red red red red red red red  red red red red red red </div>
  <div class="blue">blue blue blue blue blue blue blue blue blue blue blue</div>
</div>

<div class="flexbox">
  <div class="red">red red red red red red red red red red red red red red red red  red red red red red red </div>
  <div class="blue">blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue </div>
</div>

或旧white-space:nowrap：

.flexbox {
  display: flex;
  margin:10px;
}
.red {
  background: red;
}   
.blue {
  background: blue;
  white-space:nowrap;
}

<div class="flexbox">
  <div class="red">red red red red red red red red red red red red red red red red  red red red red red red </div>
  <div class="blue">blue blue blue blue blue blue blue blue blue blue blue</div>
</div>

<div class="flexbox">
  <div class="red">red red red red red red red red red red red red red red red red  red red red red red red </div>
  <div class="blue">blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue </div>
</div>

另一个想法是将flex:1设置为红色部分。这将允许蓝色部分的内容在红色部分不再中断时分成多行：

.flexbox {
  display: flex;
  margin:10px;
}
.red {
  background: red;
  flex:1;
}   
.blue {
  background: blue;
}

<div class="flexbox">
  <div class="red">red red red red red red red red red red red red red red red red  red red red red red red </div>
  <div class="blue">blue blue blue blue blue blue blue blue blue blue blue</div>
</div>

<div class="flexbox">
  <div class="red">red red red red red red red red red red red red red red red red  red red red red red red </div>
  <div class="blue">blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue </div>
</div>

强制在一行

1 个答案: