Как расположить блоки, чтобы средний был по центру?

Question

[Kolya112151]

Имеем 3 блока разного размера, как расположить их так, чтобы средний был в центре, а остальные по бокам?
Писать justify-content: space-between подойдёт только для одинаковых боковых блоков.

Вот пример, для наглядности, что все блоки имеют разные размеры.

<div>
   <div>1111</div>
   <div>22222222222222222222222</div>
   <div>33333333333</div>
</div>

Comments

[Сергей delphinpro]

А как в таком случае должны будут повести себя блоки, если их размеры составят
1: 10%
2: 15%
3: 50%
Второй никак не сможет расположиться в центре без наложения на третий.

[modelair]

... и для наглядности рисунка не хватает

[Kolya112151]

Сергей delphinpro, то есть невозможно?

[Сергей delphinpro]

Kolya112151, Возможно в определенных рамках, с соблюдением некоторых условий, но не универсально. Мы не знаем какого рода у вас блоки.

[Kolya112151]

modelair, ну вот, например схематичная шапка сайта

[modelair]

Kolya112151, ну, в таком случае вам нужно отдельно позиционировать этот блок

[Сергей delphinpro]

Kolya112151, ну вот, это уже более определенно.
Здесь мы видим меню, которое в теории может изменять свою ширину, если в админке добавят или скроют пункты. И есть логотип, ширина которого постоянна.
Таким образом можно задать ширины блоков так

<div class="header">
  <div class="menu"></div>
  <div class="logo"></div>
  <div class="user"></div>
</div>

.header {
  --logo-width: 7rem;
}
.menu,
.user {
  width: calc(50% - var(--logo-width) / 2);
}
.logo {
  width: var(--logo-width);
}
.user {
  display: flex;
  justify-content: flex-end; /* правый блок прижимаем вправо */
}

Если на меньших экранах логотип нужно слегка уменьшить, то добавляем

@media(max-width: 768px) {
  .header {
    --logo-width: 4rem;
  }
}

[Ankhena]

Аналогичная тема и решения без абсолютов https://qna.habr.com/q/1088262
Правда, тоже нужно думать о содержимом.

Answer 1

[modelair]

в общем-то вот.

делаем блок на полную ширину с абсолютным позиционированием относительно родителя, выравниваем его содержимое с помощью justify-content. профит.

div {
  display: flex; 
}
.container {
  position: relative;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
}
.center {
  width: 100%;
  justify-content: center;
  position: absolute;
}

<div class="container">
   <div>left</div>
   <div class="center">
     <div>
       center block
     </div>
   </div>
   <div>right</div>
</div>

https://codepen.io/modelair/pen/MWzwPwY

Comments

[Kolya112151]

Ну да, как вариант, абсолютно позиционировать центральный блок. Спасибо, не сразу увидел ответ)
А в прошлом вопросе нет ответа с решением. Разве что был один комментарий, который подтолкнул меня к решению, но комментарии нельзя отмечать решением, насколько я понял.

[modelair]

Kolya112151, нет, позиционируется его родитель:) н осмысл вы поняли

Answer 2

[Kolya112151]

Разобрался. Короче всё на изичах! Просто пишем flex-basis: 33.33% для каждого дочернего блока.
Или если один из боковых блоков превышает 33%, то пишем боковым блокам больший процент.
Например 40% 20% 40%. И в итоге получается всё адаптивно.

Comments

[Даниил]

боковым блокам 100% напиши и не придётся думать вообще об их размерах

[Aetae]

Можно просто боковым блокам flex: 1 задать, а центральный не трогать, не заморачиваясь с процентами.