彈性盒常用屬性

2021-09-25 11:26:25 字數 1314 閱讀 1473

新增瀏覽器字首: -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 手拉手...