Как разместить элемент внутри flex блока в крайнюю правую часть?

Рейтинг: 0Ответов: 2Опубликовано: 26.01.2023

Вот codepan codepen.io/Spawnes/pen/ZEopwRZ

.container {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  height: 100px;
  background-color: #000;
  border: 5px solid black;
}

.item {
  background-color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">Lorem ipsum dolor sit </div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Нужно сделать так: чтобы блок №3 прижался к блоку №4

введите сюда описание изображения

Добавлять новые элементы или классы нельзя. Вопрос именно в том, чтобы сделать это исключительно стилями с такой вёрсткой.

css html flexbox
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Нужно сделать так: чтобы блок №3 прижался к блоку №4

Вариант 1

Можно их "обернуть" еще одним элементом...

.container {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  height: 100px;
  background-color: #000;
  border: 5px solid black;
}

.item {
  background-color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

#box {
  display: flex;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">Lorem ipsum dolor sit </div>
  <div id='box'>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</div>

Вариант 2

Можно второму добавить еще описание отступов по краям...

.container {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  height: 100px;
  background-color: #000;
  border: 5px solid black;
}

.item {
  background-color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}
.test {
  margin-left: auto;
  margin-right: auto;
}
<div class="container">
  <div class="item">1</div>
  <div class="item test">Lorem ipsum dolor sit </div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

▲ 0

Способ не правильный конечно из соображения того, что 4 элемент может менять свою ширину.

.container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100px;
  background-color: #000;
  border: 5px solid black;
  position: relative;
}

.item {
  background-color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}
.item:nth-child(3) {
  position: absolute;
  top:0;
  right: 47px;
  bottom: 0;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">Lorem ipsum dolor sit </div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>