Создать масштабируемые гибкие дети - PullRequest
Новая
       8

Создать масштабируемые гибкие дети

0 голосов
/ 05 марта 2019

У меня есть элемент контейнера, который может иметь переменное количество дочерних элементов, и я хочу масштабировать ширину этих дочерних элементов.

Я установил простой элемент:

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>

1 Ответ

1 голос
/ 05 марта 2019

Вы можете добавить flex: 0 1 auto (не указывайте растите , но уменьшите в порядке, и установите flex-basis свойство равным auto) к вашему conversation-holder (ивозможно min-width: 0, если вы хотите уменьшить (coversation-holder больше).

Теперь вместо width: 50% на name и number и с плавающим number элементом слева, вы можете использовать row-reverse flexbox на conversation-holder.Смотрите демо ниже: 

.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>
...