新增瀏覽器字首: -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 居右對齊
-webkit-align-items: 子元素垂直排列
center 垂直居中
space-between 垂直兩端對齊
space-around 手拉手上下平均分
flex-start 頂部對齊
flex-end 底部對齊
baseline: 專案的第一行文字的基線對齊。(文字的行高、字型大小會影響每行的基線)
-webkit-flex-direction: 排列方式
row 水平排列-預設值
row-reverse: 主軸在水平方向,起點在右端 ;
column 垂直排列
column-reverse:主軸為垂直方向,起點在下沿。
-webkit-flex-wrap: 預設no-wrap讓元素步換行
wrap 換行
nowrap 不換行
wrap-reverse: 換行,並且第一行在容器最下方。
-webkit-align-content: 控制容器內多行在y軸上的排列方式
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 手拉手...