Выравнивание элементов div

Question

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

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>

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

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

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

БЛОГ НА HUSL

Выравнивание элементов div

Ответы (1 шт):