文章詳情頁
css - Flex布局問題
瀏覽：146日期：2023-06-19 15:13:10
問題描述
header是用的flex布局，想要搜索框水平居中，類似原生IOS里面的布局
不受左右兩邊內容的影響，依然水平居中我記得我之前實現過，后來用了flex.css就忘了，麻煩看看用這個怎么實現
問題解答
回答1：.header{ display:flex; flex-flow:row nowrap; align-item:center; justify-content:space-around;}
詳細了解Flex布局見：http://www.ruanyifeng.com/blo...
回答2：只有三個元素可以直接用 space-between 撐開
https://jsfiddle.net/straybug...
你后來更新的
不受左右兩邊內容的影響，依然水平居中
既然不受影響那么只能是 absolute 抽離出來再居中了。
https://jsfiddle.net/straybug...
回答3：主要用到 align-items: center 即可這是demo
回答4：中間那個就用絕對定位,左右邊寬度不一樣的話會影響中間位置
.search { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
標簽：
CSS
相關文章：
1. docker容器呢SSH為什么連不通呢？2. 在windows下安裝docker Toolbox 啟動Docker Quickstart Terminal 失敗！3. docker - 各位電腦上有多少個容器啊？容器一多，自己都搞混了，咋辦呢？4. docker網絡端口映射，沒有方便點的操作方法么？5. angular.js - react的redux和vue的vuex，angular呢6. javascript - 回調函數和普通調用函數的區別？7. eclipse - 如何解決no atk-wrapper in java.library.path8. javascript - input框相關問題9. docker start -a dockername 老是卡住，什么情況？10. docker images顯示的鏡像過多，狗眼被亮瞎了，怎么辦？
排行榜
網公網安備