css - Flex layout issue

Question

The header uses flex layout. I want the search box to be horizontally centered, similar to the layout in native IOS

---

It is not affected by the content on the left and right sides, and is still horizontally centered
I remember that I implemented it before, but then I forgot about it when I used flex.css. Please see how to achieve it with this

Answer 1

.header{
    display:flex;
    flex-flow:row nowrap;
    align-item:center;
    justify-content:space-around;
}

To learn more about Flex layout, please see: http://www.ruanyifeng.com/blo...

Answer 2

Only three elements can be spread directly using space-between

https://jsfiddle.net/straybug...

---

You updated later

Not affected by the content on the left and right, still horizontally centered

Since it is not affected, the only way is to extract the absolute and then center it.

https://jsfiddle.net/straybug...

Answer 3

Mainly use align-items: center
This is a demo

Answer 4

Use absolute positioning for the middle one. If the left and right widths are different, it will affect the middle position

.search {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}