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佈局時用到的兩個比較常見又好用的例子