文章詳情頁
css - Flex布局問題
瀏覽:123日期: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. python - scrapy url去重2. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)3. node.js - 微信小程序websocket連接問題4. python執行cmd命令,怎么讓他執行類似Ctrl+C效果將其結束命令?5. 實現bing搜索工具urlAPI提交6. Python中使用超長的List導致內存占用過大7. python - Django有哪些成功項目?8. ios - 類似微博首頁,一張圖的時候是如何確定圖大小的?9. 數據庫 - Mysql的存儲過程真的是個坑!求助下面的存儲過程哪里錯啦,實在是找不到哪里的問題了。10. 鏈接圖片時,鏈接不成功
排行榜
