2 div`a, 1 - в середине, 2 - справа с краю

Question

Есть

<div class="wrapper">
  <div class="item-1">
  <div class="item-1">
</div>

Необходимо чтобы item-1 был в середине, а item-2 был с краю. Желательно через flex или grid

Answer 1

Можете попробовать сверстать так. Но для большего удобства попробуйте использовать Grid.

.wrapper {
  display: flex;
  width: 500px;
  height: 300px;
  background: #22b280; 
  align-items: center;
  justify-content: space-between;
}

.item-1, .item-2 {
  width: 100px;
  height: 100px;
  background: #ccc;
  text-align: center;
}

.cont {
  width: 33.333333%;
  display: flex;
  justify-content: flex-end;
}

.cont:nth-child(2) {
  justify-content: center;
}

<div class="wrapper">
  <div class="cont">
  </div>
  <div class="cont">
    <div class="item-1">1</div>
  </div>
  <div class="cont">
    <div class="item-2">2</div>
  </div>
</div>

БЛОГ НА HUSL

2 div`a, 1 - в середине, 2 - справа с краю

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