flex和grid布局属性速览

一、flex布局

1. 容器属性

display

指定容器的布局方式

flex            指定容器为flex布局,默认为容器为块级元素
inline-flex     行内块的布局

flex-direction

指定主轴方向(默认row)

row             主轴为水平方向,起点在左端
row-reverse     主轴为水平方向,起点在右端
column          主轴为垂直方向,起点在上沿
column-reverse  主轴为垂直方向,起点在下沿

flex-wrap

指定是否换行(默认不换行)

nowrap          不换行
wrap            换行,第一行在上方
wrap-reverse    换行,第一行在下方

flex-flow

flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

<flex-direction> || <flex-wrap>

justify-content

属性定义了项目在主轴上的对齐方式

flex-start      左对齐
flex-end        右对齐
center          居中
space-between   两端对齐,项目之间的间隔都相等
space-around    每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍

align-items

属性定义了项目在侧轴上的对齐方式

flex-start      交叉轴的起点对齐
flex-end        交叉轴的终点对齐
center          交叉轴的中点对齐
baseline        项目的第一行文字的基线对齐
stretch         如果项目未设置高度或设为auto,将占满整个容器的高度

align-content

属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用

flex-start      与交叉轴的起点对齐
flex-end        与交叉轴的终点对齐
center          与交叉轴的中点对齐
space-between   与交叉轴两端对齐,轴线之间的间隔平均分布
space-around    每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
stretch         轴线占满整个交叉轴

2. 项目属性

order

属性定义项目的排列顺序。数值越小,排列越靠前,默认为0

flex-grow

属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大

flex-shrink

属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小

flex-basis

属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小

flex

属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)

align-self

属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

auto            与容器属性align-items一致
flex-start      交叉轴的起点对齐
flex-end        交叉轴的终点对齐
center          交叉轴的中点对齐
baseline        项目的第一行文字的基线对齐
stretch         如果项目未设置高度或设为auto,将占满整个容器的高度

二、grid布局

1. 容器属性

display

指定容器的布局方式

grid            指定容器布局属性,默认为容器为块级元素
inline-grid     行内块的布局

grid-template-columns

属性定义每一列的列宽

100px 100px 100px       使用像素定义
33.33% 33.33% 33.33%    使用百分比定义
1fr 1fr 1fr             使用fr,表示比例
repeat(3, 33.33%)       使用repeat函数,第一个参数是重复的次数,第二个参数是所要重复的值

grid-template-rows

属性定义每一行的行高

属性值同grid-template-columns属性值

grid-template-areas

属性用于定义区域

'a a a'
'b b b'
'c c c'

"header header header"
"main main sidebar"
"footer footer footer"

grid-row-gap

设置行与行的间隔(行间距)

grid-column-gap

设置列与列的间隔(列间距)

grid-gap

grid-column-gapgrid-row-gap的合并简写形式

20px 20px

grid-auto-flow

设置容器的子元素排列顺序

默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行

row             先行后列
column          先列后行
row dense       表示"先行后列",并且尽可能紧密填满,尽量不出现空格
column dense    表示"先列后行",并且尽量填满空格

justify-items

设置单元格内容的水平位置(左中右)

start       对齐单元格的起始边缘
end         对齐单元格的结束边缘
center      单元格内部居中
stretch     拉伸,占满单元格的整个宽度(默认值)

align-items

设置单元格内容的垂直位置(上中下)

属性值同justify-items属性值

place-items

是align-items属性和justify-items属性的合并简写形式

justify-content

整个内容区域在容器里面的水平位置(左中右)

start           对齐容器的起始边框
end             对齐容器的结束边框
center          容器内部居中
stretch         项目大小没有指定时,拉伸占据整个网格容器
space-around    每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍
space-between   项目与项目的间隔相等,项目与容器边框之间没有间隔
space-evenly    项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔

align-content

整个内容区域的垂直位置(上中下)

同justify-content属性值

place-content

是align-content属性和justify-content属性的合并简写形式

2. 项目属性

grid-column-start

左边框所在的垂直网格线

grid-column-end

右边框所在的垂直网格线

grid-row-start

上边框所在的水平网格线

grid-row-end

下边框所在的水平网格线

grid-column

grid-column-startgrid-column-end的合并简写形式

grid-row

grid-row-start属性和grid-row-end的合并简写形式

grid-area

指定项目放在哪一个区域

justify-self

设置单元格内容的水平位置(左中右)

align-self

设置单元格内容的垂直位置(上中下)

start       对齐单元格的起始边缘。
end         对齐单元格的结束边缘。
center      单元格内部居中。
stretch     拉伸,占满单元格的整个宽度(默认值)。

place-self

align-self属性和justify-self属性的合并简写形式

暂无评论

发送评论 编辑评论


				
上一篇