display:flex 意思是彈性布局
首先flex的出現是為了解決哪些問題呢？
一、頁面排列布局
像此圖左右兩個div一排顯示
可以用浮動的布局方式
html部分
css部分
這種布局有兩個缺點
1.需要一個空div來清除浮動，當然也可以選用其他清除浮動的方法，但此處需要清除浮動才能不影響下面的布局。
2.當.left,.right 的寬度是固定的，瀏覽器寬度變得過窄時，.right會被擠到下面
用display:flex布局，可以解決這兩個缺點
剛吃的html部分不變，css部分不變
級元素定義display:flex,子元素寬度用flex來定義,flex:1 是均分父子級元素。占的比例相同
1:2分時
同樣分為3份時
flex是所佔的比例，這樣的布局就方便很多。
二、div上下左右居中
我之前寫過div上下左右居中的幾種方法
其中有一個寫了margin：auto auto；這個方法的使用前提就是先把父元素設為display:flex
html部分
css部分
在未知div寬高時，用這種方法比較方便
這是我在使用flex布局時用到的兩個比較常見又好用的例子
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/268566.html
微信掃一掃 
支付寶掃一掃 