css – Problem mit dem Flex-Layout

Question

Der Header verwendet ein Flex-Layout. Ich möchte, dass das Suchfeld horizontal zentriert ist, ähnlich dem Layout im nativen IOS

---

Der Inhalt auf der linken und rechten Seite hat keinen Einfluss, er ist immer noch horizontal zentriert.
Ich erinnere mich, dass ich es schon einmal implementiert habe, aber dann habe ich es vergessen, als ich flex.css verwendet habe. Sehen Sie sich bitte an, wie Sie es damit erreichen können

Answer 1

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

详细了解Flex布局见：http://www.ruanyifeng.com/blo...

Answer 2

只有三个元素可以直接用 space-between 撑开

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

---

你后来更新的

不受左右两边内容的影响，依然水平居中

既然不受影响那么只能是 absolute 抽离出来再居中了。

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

Answer 3

主要用到 align-items: center 即可
这是demo

Answer 4

中间那个就用绝对定位,左右边宽度不一样的话会影响中间位置

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