彈性盒子常用屬性

新增瀏覽器字首： -webkit-           也可用postcss自動新增

display:-webkit-flex;*如果用了彈性布局，子元素不需要浮動，

-webkit-justify-content：      子元素水平排列方式方式。

center　　　　　　水平居中

space-between　　兩端對齊

space-around　　  手拉手平均分

flex-start　　　　　居左對齊

flex-end　　　　　 居右對齊

-webkit-align-items：　　     子元素垂直排列

center　　　　　　垂直居中

space-between　　上下兩端對齊

space-around　　  手拉手上下平均分

flex-start　　　　　頂部對齊

flex-end　　　　　 底部對齊

-webkit-flex-direction：　　   排列方式        

row　　　　　　　預設值  橫向排列

row-reverse　　　 橫向顛倒排列    *不常用

column　　　　　 垂直排列

column-reverse　  垂直顛倒排列    *不常用　 　　

-webkit-flex-wrap：      　　　預設no-wrap讓元素步換行

wrap　　　換行

nowrap　  不換行

-webkit-align-content:  　　　　　　　控制容器內多行在y軸上的排列方式

stretch　　　　　　預設值

center　　　　　　 居中對齊

flex-start 　　 　　  頂部對齊

flex-end    　　　　 底部對齊

space-between　　 上下對齊

space-around　　　上下手拉手對齊

子級flex：1　　　　　1指的是乙個係數 *子元素再劃分父元素寬度，先刨除固定寬度

flex-grow：1　　  定義子元素放大比例

彈性盒子常用屬性

display設定為flex屬性flex direction屬性 設定子元素的排列方式，同時設定主軸，預設的情況下x軸為主軸flex direction row column row reverse column reverse justify content屬性 設定主軸的排列方式，此屬性作用于父...

flex彈性盒子常用屬性

屬性值描述 display flex 定義乙個盒子為彈性盒子 flex direction row子盒子水平排列，從左到右 row reserve 子盒子水平反向排列 column 子盒子垂直排列，從上到下 column reserve 子盒子垂直反向排列 flex wrap no wrap 子盒子...

彈性盒子內容體居右對其 彈性盒子常用屬性

新增瀏覽器字首 webkit 也可用postcss自動新增 display webkit flex 如果用了彈性布局，子元素不需要浮動，webkit justify content 子元素水平排列方式方式。center 水平居中 space between 兩端對齊 space around 手拉手...