2

Есть такая структура:

body {
  display: flex;
  justify-content: center;
  /* нужно чтобы оранжевые блоки выравнивались по центру, а синий примыкал  к ним слева */
}
.wrapper {
  display: flex;
}
.cube {
  width: 100px;
  height: 100px;
  background-color: darkorange;
  border: 1px solid black;
}
.cube:only-child {
  background-color: royalblue;
}
<body>
<div class="wrapper">
  <div class="cube"></div>
</div>
<div class="wrapper">
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
</div>
</body>

И картинка, показывающая, что я хочу сделать:

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

Как можно сделать такое выравнивание?

1 ответ 1

1

Можно синий кубик вытащить из потока, задав ему position: absolute и сдвинуть влево на ширину кубика+границы (102px в Вашем случае):

body {
  display: flex;
  justify-content: center;
}
.wrapper {
  display: flex;
}
.cube {
  width: 100px;
  height: 100px;
  background-color: darkorange;
  border: 1px solid black;
}
.cube:only-child {
  background-color: royalblue;
  position: absolute;
  transform: translateX(-102px);
}
<div class="wrapper">
  <div class="cube"></div>
</div>
<div class="wrapper">
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.