css - Flex佈局問題

Question

header是用的flex佈局，想要搜尋框水平居中，類似原生IOS裡面的佈局不受左右兩邊內容的影響，依然水平居中我記得我之前實現過，後來用了flex.css就忘了，麻煩看看用這個怎麼實現

仅有的幸福 · Answer

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

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

阿神 · Answer

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

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

你後來更新的

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

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

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

伊谢尔伦 · Answer

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

我想大声告诉你 · Answer

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

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

php8，我來也