一、flex
display: flex;
1.flex-direction
容器内项目的排列方式
取值:
- row 从左到右,默认
- row-reverse 从右到左
- column 从上到下
- column-reverse 从下到上
2.flex-wrap
换行
- nowrap 不换行,默认
- wrap 换行
- wrap-reverse 换行,行顺序反转
3.align-items
元素在侧轴(纵轴)方向上的对齐方式。
- stretch 项目被拉伸以适应容器,默认值
- flex-start 项目位于交叉轴方向开头
- flex-end 项目位于交叉轴方向结尾
- center 项目位于交叉轴方向中心
4.align-content
多个主轴的对齐方式(多行,不常用)
- flex-start 项目位于容器开头,默认值
- flex-end 项目位于容器结尾
- center 项目位于容器中心
- space-between 项目之间留空白,左右对齐,剩下的空间平分为缝隙
- space-around 项目之前、之间、之后留空白,容器开始和结束的缝隙宽度是项目之间缝隙的两倍
5.项目
- order 项目排列顺序,数值越小,排列越靠前。默认为0
- flex-grow 放大比例(剩余空间按比例分配)。默认为0,不放大
- flex-shrink 缩小比例。默认为1,自动缩小
- flex-basis 设置项目宽度,内容超出范围会自动变大
- align-self 允许单个项目与其他项目有不同的对齐方式
二、grid
display: grid 该容器是一个块级元素;
设置成 display: inline-grid
则意味着该容器元素为行内元素。
网格布局,将网页划分成一个个网格,并且可以任意组合成不同的布局。
1.基本概念
容器和项目:
采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,被称为"项目"(item)。
行和列:容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)
单元格:行和列的交叉区域,称为"单元格"(cell)。
网格线 :划分网格的线,称为"网格线"(grid line)。水平网格线划分出行,垂直网格线划分出列。
2.划分行列
grid-template-columns
属性定义每一列的列宽
grid-template-rows
属性定义每一行的行高
2.1绝对定位
例如 :100px
2.2百分比定位
例如:50%
2.3repeat函数
repeat()
接受两个参数,第一个参数是重复的次数(上例是 3),第二个参数是所要重复的值
grid-template-rows: repeat(3, 33.33%);
2.4关键字
auto-fill
关键字
单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用 auto-fill
关键字表示自动填充
grid-template-columns: repeat(auto-fill, 100px);
fr
关键字
为了方便表示比例关系,网格布局提供了 fr
关键字,如果两列的宽度分别为 1fr
和 2fr
,就表示后者是前者的两倍。
grid-template-columns: 1fr 1fr;
minmax()
minmax(min,max)
函数指定一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。
auto
关键字
auto
关键字表示由浏览器自己决定长度
3.间距
row-gap
属性设置行与行的间隔(行间距),
column-gap
属性设置列与列的间隔(列间距):
简写:
gap: <grid-row-gap> <grid-column-gap>
4.指定区域
网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas
属性用于定义区域。
grid-template-areas: 'a b c'
'd e f'
'g h i';
多个单元格合并成一个区域的写法如下
grid-template-areas: 'a a a'
'b b b'
'c c c';
如果某些区域不需要利用,则使用"点"(.
)表示。
5.grid-auto-flow
这个顺序由 grid-auto-flow
属性决定,默认值是 row
,即"先行后列"。也可以将它设成 column
,变成"先列后行"。
属性值:
row
column
,
row dense
表示"先行后列",
column dense
表示"先列后行"
6.位置
justify-items
属性设置单元格内容的水平位置(左中右),align-items
属性设置单元格内容的垂直位置(上中下)。
简写
place-items: <align-items> <justify-items>;
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
属性值:
start
:对齐单元格的起始边缘。end
:对齐单元格的结束边缘。center
:单元格内部居中。stretch
:拉伸,占满单元格的整个宽度(默认值)。
6.2justify-content、align-content、place-content
justify-content
属性是整个内容区域在容器里面的水平位置(左中右),align-content
属性是整个内容区域的垂直位置(上中下)。
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
start
:对齐容器的起始边框。end
:对齐容器的结束边框。center
:容器内部居中。stretch
:项目大小没有指定时,拉伸占据整个网格容器。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。space-between
:项目与项目的间隔相等,项目与容器边框之间没有间隔。space-evenly
:项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。