Question

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

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

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

在此插件中，您可以缩小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中（如果您想进一步缩小min-width: 0，还可以coversation-holder）。

现在不用在width: 50%和name上都使用number并浮动将number元素留在左侧，可以使用conversation-holder上> row-reverse 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>

创建可伸缩的flex子代

1 个答案: