css - Flex布局问题

Question

header是用的flex布局，想要搜索框水平居中，类似原生IOS里面的布局

---

不受左右两边内容的影响，依然水平居中
我记得我之前实现过，后来用了flex.css就忘了，麻烦看看用这个怎么实现

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%);
}