创建可扩展的 flex 子项

Question

我有一个容器元素，它可以包含可变数量的子元素，我想缩放这些子元素的宽度。

我已经设置了一个简单的 plunker：

https://plnkr.co/edit/ef0AGPsK7FJJyBqgWuMi?p=preview

在这个 plunker 中，您可以缩小 DOM，name 和 number 元素将使用它们的省略号来适应父元素中的内容。这很好。

但是，当您放大 DOM 时，您会看到子元素分散开来，因此它们在父元素上平分。这是因为flex: 1。但我希望容器元素是正确显示内容所需的最大宽度，而不是填充父容器元素。

/* Styles go here */

.conversation-container {
  display: flex;
  width: calc(100% - 20px);
  border: 1px solid black;
  background-color: green;
  padding: 10px;
}

.conversation-container .conversation-holder {
  flex: 1;
  background-color: yellow;
  padding: 5px;
  border: 1px solid white;
  margin-right: 5px;
}

.conversation-container .conversation-holder .name {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50%;
  display: inline-block;
}

.conversation-container .conversation-holder .number {
  float: left;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50%;

}

.conversation-container1 {
  display: flex;
  width: calc(100% - 20px);
  border: 1px solid black;
  background-color: green;
  padding: 10px;
}

.conversation-container1 .conversation-holder {

  background-color: yellow;
  padding: 5px;
  border: 1px solid white;
  margin-right: 5px;
}

.conversation-container1 .conversation-holder .name {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50%;
  display: inline-block;
}

.conversation-container1 .conversation-holder .number {
  float: left;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50%;

}

<h1>Scalable content using flex, example 1</h1>
  <div class="conversation-container">
    <div class="conversation-holder">
      <span class="name">Namefrom Someone</span>
      <span class="number">555666444213321</span>
    </div>
    <div class="conversation-holder">
      <span class="name">Namefrom Someone</span>
      <span class="number">555666444123123</span>
    </div>
    <div class="conversation-holder">
      <span class="name">Namefrom Someone</span>
      <span class="number">555666444123321</span>
    </div>
  </div>
  
  <h1>Scalable content using flex, example 2</h1>
  <div class="conversation-container1">
    <div class="conversation-holder">
      <span class="name">Namefrom Someone</span>
      <span class="number">555666444213321</span>
    </div>
    <div class="conversation-holder">
      <span class="name">Namefrom Someone</span>
      <span class="number">555666444123123</span>
    </div>
    <div class="conversation-holder">
      <span class="name">Namefrom Someone</span>
      <span class="number">555666444123321</span>
    </div>
  </div>

Answer 1

你可以添加flex: 0 1 auto（告诉它不要增长，但收缩没关系，并将flex-basis属性设置为auto）到你的conversation-holder （如果你想缩小 coversation-holder 更多，也许min-width: 0）。

现在，您可以使用 row-reverse 而不是在 name 和 number 和 浮动 左侧的 number 元素上使用 width: 50% conversation-holder 上的 flexbox。请参阅下面的演示：

.conversation-container {
  display: flex;
  width: calc(100% - 20px);
  border: 1px solid black;
  background-color: green;
  padding: 10px;
}

.conversation-container .conversation-holder {
  flex: 0 1 auto; /* CHANGED */
  min-width: 0; /* ADDED */
  background-color: yellow;
  padding: 5px;
  border: 1px solid white;
  margin-right: 5px;
  /* ADDED BELOW */
  display: flex;
  flex-direction: row-reverse;
}

.conversation-container .conversation-holder .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* width: 50%; */
  display: inline-block;
}

.conversation-container .conversation-holder .number {
  /* float: left; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* width: 50%; */
}

<div class="conversation-container">
  <div class="conversation-holder">
    <span class="name">Namefrom Someone</span>
    <span class="number">555666444213321</span>
  </div>
  <div class="conversation-holder">
    <span class="name">Namefrom Someone</span>
    <span class="number">555666444123123</span>
  </div>
  <div class="conversation-holder">
    <span class="name">Namefrom Someone</span>
    <span class="number">555666444123321</span>
  </div>
</div>