I need to replace flex gap which doesn't work in safari

Question

I need to rewrite flex gap for safari. i have 1 block and inside this block i put 3 input elements

[input][input][input]

and when i use this:

.myDiv {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.myDiv > * + *  { 
margin-left: 20px;
}

I have this:

[input][input]_____[input]

But i want this:

[input]____[input]_____[input]

If anyone knows a way to do this without losing height?

Because when I added it and it got a change in the position in height.

.inline-inputs > * * {
 margin-left: 20px;
}

Answer 1

I think you might be looking for the justify-content: center modifier.