一、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-gap
和grid-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-start
和grid-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
属性的合并简写形式