彈性盒常用屬性

新增瀏覽器字首： -webkit

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

display:flex; 容器新增彈性布局後，顯示為塊級元素；

display:inline-flex; 容器新增彈性布局後，顯示為行級元素；

注意：設為 flex布局後，子元素的float、clear和vertical-align屬性將失效。但是position屬性，依然生效

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

center　　　　　　水平居中　　　　

space-between　　兩端對齊　　　　　　　　
space-around　 手拉手平均分
flex-start　　 居左對齊
flex-end　　　 居右對齊

center             垂直居中

space-between 垂直兩端對齊
space-around 手拉手上下平均分
flex-start 頂部對齊
flex-end 底部對齊
baseline: 專案的第一行文字的基線對齊。(文字的行高、字型大小會影響每行的基線)

row    水平排列-預設值

row-reverse： 主軸在水平方向，起點在右端 ；
column 垂直排列
column-reverse：主軸為垂直方向，起點在下沿。

wrap       換行

nowrap 不換行
wrap-reverse： 換行，並且第一行在容器最下方。

stretch　　　　　　預設值，如果專案未設定高度或設為auto，將佔滿整個容器的高度

center　　　　　　 居中對齊
flex-start 　　 頂部對齊
flex-end 　　 底部對齊
space-between　　 上下對齊
space-around　　　上下手拉手對齊

css3 彈性盒 常用屬性筆記

css3 3 多列 column count 設定列的個數 可以把一行文字分割成設定的列的個數。如果設定了列的寬度 當列的最小寬度和 不夠總寬度的時候 列的數量就會縮小 column width 可以設定列的最小寬度 column span 設定列的橫跨數量 常用於設定標題 column rule ...

彈性盒子常用屬性

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

彈性盒子常用屬性

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