Заставить обернутый div перейти к концу

#css #flexbox

Вопрос:

Когда гибкий элемент переносится в новую строку, он переходит к началу строки, но я хочу, чтобы он вел себя так space-between .

Например, этот код:

 .container{
  border: 1px solid grey;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item{
  padding: 15px;
  border: 1px solid blue;
  margin-bottom: 5px;
}

 <div class="container">
  <div class="item">amp;< This is a long sentence that makes next item wrap</div>
  <div class="item">This is small amp;></div>
</div>

Как я могу сделать так, чтобы это выглядело так:

Ответ №1:

Возможно, это не самое элегантное решение, но если вы хотите, чтобы ваш первый div оставался там, где он есть, и вы хотите, чтобы ваш второй div переместился в конец окна, что вы можете сделать, это просто добавить средний div и установить его видимость скрытой. Таким образом, есть что-то, что заполнит это пространство и подтолкнет ваш «это маленький» div к краю контейнера. Я внес следующие изменения в ваш код, и это, похоже, создает эффект, который вы ищете.

HTML:

 <div class="container">
  <div class="item item1">amp;< This is a long sentence that makes next item wrap</div>
  <div class="item item2">This is medium</div>
  <div class="item item3">This is small amp;></div>
</div>

CSS:

 .container{
  border: 1px solid grey;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item{
  padding: 15px;
  border: 1px solid blue;
  margin-bottom: 5px;
}

.item2 {
  visibility: hidden;
}

1. Это также можно сделать, установив для justify-content в контейнере значение flex-end и присвоив первому элементу его собственный класс, для свойства margin-right установлено значение auto .

Ответ №2:

Чтобы сохранить space-between поведение и достичь желаемого результата, что мы могли бы сделать, это настроить таргетинг только на последний элемент, который вы хотите разместить справа, и просто изменить margin .

 <div class="container">
  <div class="item item1">amp;< This is a long sentence that makes next item wrap</div>
  <div class="item item2">This is medium</div>
  <div class="item item3">This is small amp;></div>
</div>

.container{
  border: 1px solid grey;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item{
  padding: 15px;
  border: 1px solid blue;
  margin-bottom: 5px;
}

Установка margin-left на auto

 .item:last-child {
  border: 2px solid green;
  margin-left: auto;
}

Ответ №3:

Это задача float (да, float …)

 .container {
  border: 1px solid grey;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  overflow:auto;
}

.item {
  padding: 15px;
  border: 1px solid blue;
  margin-bottom: 5px;
  display:inline-block;
}

.item:last-child {
  float:right;
}

 <div class="container">
  <div class="item">amp;< This is a long sentence that makes next item wrap</div>
  <div class="item">This is small amp;></div>
</div>