display:flex解決的問題
https://blog.csdn.net/weixin_36401046/article/details/53127019
https://blog.csdn.net/linda_417/article/details/51507176
http://www.jb51.net/css/520392.html
display:flex 意思是彈性佈局
首先flex的出現是為了解決哪些問題呢?
一、頁面行排列布局像此圖左右兩個div一排顯示
可以用浮動的佈局方式
html部分
css部分
這種佈局有兩個缺點
1.需要一個空div來清除浮動,當然也可以選用其他清除浮動的方法,但此處需要清除浮動才能不影響下面的佈局。
2.當.left,.right 的寬度是固定的,瀏覽器寬度變的過窄時,.right會被擠到下面
用display:flex佈局,可以解決這兩個缺點
剛吃的html部分不變,css部分
父級元素定義display:flex,子元素寬度用flex來定義,flex:1 是均分父級元素。佔的比例相同
二、div上下左右居中
我之前寫過div上下左右居中的幾種方法
其中有一個寫了margin:auto auto;這個方法的使用前提就是先把父元素設為display:flex
html部分
css部分
在未知div寬高時,用這種方法比較方便
這是我在使用flex佈局時用到的兩個比較常見又好用的例子
相關文章
- display:flex佈局下white-space:nowrap失效問題解決Flex
- 解決Flex裡的亂碼問題Flex
- display的flex屬性使用詳解Flex
- display:flex和display:box的區別Flex
- display:flex與display:box 區別Flex
- 在Linux上安裝Oracle時DISPLAY問題解決方案LinuxOracle
- display:inline-block帶來的問題及解決辦法inlineBloC
- display:flex 彈性佈局Flex
- display:flex 圖片居中效果Flex
- display:flex與inline-flex 區別Flexinline
- 解決「問題」,不要解決問題
- CSS3 display:flex和display:box有什麼區別?CSSS3Flex
- flex亂碼問題Flex
- Flex 是什麼? flex和flash是什麼關係?flex 解決什麼問題?flex和j2ee/.net是什麼關係?Flex
- 利用flex佈局解決ios輸入框被鍵盤遮擋問題FlexiOS
- 解決問題
- 發現問題,解決問題
- 【問題解決】單機搭建dataguard的問題
- 黑蘋果的問題解決蘋果
- 遇到問題的解決方法
- 解決bigdecime的問題
- oracle 鎖問題的解決Oracle
- vpd碰到的問題解決
- 驢解決不了的問題
- linux解決xhost: unable to open displayLinux
- linux解決xhost unable to open display‘’Linux
- 解決github訪問慢的問題Github
- 解決 github 訪問不了的問題Github
- display: flex彈性佈局程式碼例項Flex
- yum問題解決
- sqlitedabaseislocked問題解決SQLite
- dump 解決問題
- 解決Redmine建立&更新問題時很慢的問題
- 解決問題的方法和途徑-問題管理
- 淺談CSS3中display屬性的Flex佈局CSSS3Flex
- 完美解決xhost +報錯: unable to open display
- 轉貼:xhost unable to open display解決方法
- 提升解決問題能力的思考