display:flex 意思是彈性布局
首先flex的出現(xiàn)是為了解決哪些問題呢孽查?
一饥悴、頁面行排列布局
像此圖左右兩個(gè)div一排顯示
可以用浮動(dòng)的布局方式
html部分
css部分
這種布局有兩個(gè)缺點(diǎn)
1.需要一個(gè)空div來清除浮動(dòng),當(dāng)然也可以選用其他清除浮動(dòng)的方法盲再,但此處需要清除浮動(dòng)才能不影響下面的布局西设。
2.當(dāng).left,.right 的寬度是固定的,瀏覽器寬度變的過窄時(shí)答朋,.right會被擠到下面
用display:flex布局贷揽,可以解決這兩個(gè)缺點(diǎn)
剛才的html部分不變,css部分
父級元素定義display:flex,子元素寬度用flex來定義,flex:1 是均分父級元素梦碗。占的比例相同
1:2分時(shí)
同樣分為3份時(shí)
flex是所占的比例禽绪,這樣的布局就方便很多。
二洪规、div上下左右居中
其中有一種margin:auto auto印屁;這個(gè)方法的使用前提就是先把父元素設(shè)為display:flex
html部分
css部分
在未知div寬高時(shí),用這種方法比較方便
這是我在使用flex布局時(shí)用到的兩個(gè)比較常見又好用的例子