推薦阮一峰寫的flex布局博客,這里我只是說下自己的學習記錄.
flex布局可以實現響應式布局.
兼容性:

實現flex布局,要有父容器和子元素.
將父容器設置為display:flex.
父容器設置為display:flex之后，它的子元素的float,clear,vertical-align屬性將失效。
flex容器有兩個軸，一條為主軸，一條為交叉軸，主軸和交叉軸與x,y軸類似.

這里只說我常用的屬性:
一般情況下會這樣設置容器的屬性:
flex-flow:row no-wrap; ,這條為縮寫屬性，row代表從左向右排列.no-wrap表示不換行.
justify-content: flex-start; 這條屬性表示主軸上的對齊方式.
align-items:flex-start; 這條屬性表示交叉軸上的對齊方式.

子元素上的屬性:
order: 0； 這條屬性表示項目的排列順序，子元素將會按order的值從小到大按順序排列,默認值為0.如果將某個子元素的order屬性設為-1，則這個子元素排在第一位.
flex-grow；表示子元素的放大比例.默認為0，表示如果存在多余空間，子元素也不會放大.
flex-shrink;表示子元素的縮小比例，默認為1，表示如果容器空間變小時，子元素也會按比例縮小，如果某個子元素設置為0，則其他子元素會縮小，這個子元素不會縮小.
flex-basis;一般不需要設置，默認值為auto.
flex；是flex-grow flex-shrink flex-basis3個屬性的縮寫，默認值為0，1，auto.我一般設置為flex:1，等同于flex:auto（flex:1 1 auto）;

我就記錄自己常用的屬性，不常用的屬性我覺得沒必要記錄。

總結

以上是生活随笔為你收集整理的flex布局学习记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。