css - Flex布局問題

問題描述

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

不受左右兩邊內容的影響，依然水平居中我記得我之前實現過，后來用了flex.css就忘了，麻煩看看用這個怎么實現

問題解答

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

詳細了解Flex布局見：http://www.ruanyifeng.com/blo...

只有三個元素可以直接用 space-between 撐開

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

你后來更新的

不受左右兩邊內容的影響，依然水平居中

既然不受影響那么只能是 absolute 抽離出來再居中了。

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

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

中間那個就用絕對定位,左右邊寬度不一樣的話會影響中間位置

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