How to center an element in flex?

Question

css

Hello, I have the following problem, I have a flex box with 3 items, all 3 different widths. The task is as follows, you need the first element to be pressed to the left side, the last to the right, and 2 flaunted clearly in the center
. What are the ways to solve this problem, the only thing I thought of is using margin to "grow" the smaller element to the width of the larger

Answer 1

In your case add styles like:
And it's better to do p in div

p {
  flex: 1;
}

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

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

Answer 2

Set left and right to the same percentage width. Then the middle block will be exactly in the center.