推薦阮一峰寫的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布局使用記錄
最近專案中更多的用到了flex布局，以前不太會用，記錄一下嘗試過程和心得。display flex 塊標籤 display inline flex 行內標籤 給某一標籤新增上述樣式後，即可將此標籤設定為flex布局 彈性布局 任何乙個容器都可以被指定為flex 布局 常用的彈性布局分兩大種，第一種是...
flex布局學習
內容 flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。設為 flex 布局以後，子元素的float clear和vertical align屬性將失效 採用 flex 布局的元素，稱為 flex 容器 flex...
flex布局學習
flex flexible box 是一種彈性布局，用於盒狀模型 任何一種容器都可以指定為flex布局 box注意 行內元素使用display flex 會變成塊級元素 行內元素可以使用inline flex進行flex布局 box注意 設定為flex布局之後，子元素的float clear和ver...