Как отцентрировать элемент во flex?

Question

[caof19]

Здравствуйте, имеется следующая проблема, есть flex-блок с 3 элементами, все 3 разной ширины. Задача стоит так, нужно чтоб первый элемент был прижат к левой части, последний к правой, а 2 красовался четко по центру
Какие есть пути решения данной проблемы, единственное до чего я додумался - это при помощи margin "доращивать" меньший элемент до ширины большего

Answer 1

[Sergey]

В вашем случае добавить стилей, например:
И лучше p сделать в div

p {
  flex: 1;
}

p:nth-child(2) {
  text-align:center;
}

p:last-child {
  text-align:right;
}

Comments

[caof19]

На самом деле я не доописал проблему, надо чтоб еще центральная часть могла "съедать" все свободной центральное место, при помощи вас решил и эту проблему, правда кустарно, но все же

.flex {
  display: flex;
  justify-content: space-between
}
div {
  flex: 1;
}

div:nth-child(2) {
  text-align:center;
  flex-grow: 6
}

div:last-child {
  text-align:right;
}

Answer 2

[McBernar]

Задайте левому и правому одинаковую ширину в процентах. Тогда средний блок будет точно по центру.