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