前言
在flex布局和grid布局中元素居中通常会用到justify-content 和 align-items属性。
grid布局主轴方向为水平方向,次轴(又叫交叉轴)方向为垂直方向。
flex布局主轴方向为flex-direction方向,次轴是与主轴垂直的方向
justify-content与align-items使用
一、justify-content
作用:设置主轴方向的对齐方式
属性值:
① start :按主轴起点对齐(如果主轴是水平方向,则为左对齐;垂直方向,则为顶部对齐)
② center: 按主轴居中对齐
③ end: 按主轴结束点对齐(如果主轴是水平方向,则为右对齐;垂直方向,则为底部对齐)
④ space-around: 在主轴方向上,元素均匀分布
⑤ space-between: 在主轴方向上,两边元素贴边,其余元素均匀分布
二、align-items
作用:设置次轴方向的对齐方式
属性值:
① start: 按次轴起点对齐(如果次轴是水平方向,则为左对齐;垂直方向,则为顶部对齐)
② center: 按次轴居中对齐
③ end: 按次轴结束点对齐(如果次轴是水平方向,则为右对齐;垂直方向,则为底部对齐)
三、常用组合
① 令盒子内元素水平居中,垂直居中
display: flex;
justify-content: center;
align-items: center;
② 令盒子内水平方向两侧元素靠边,其余元素平均分配,垂直方向居中
display: flex;
justify-content: space-between;
align-items: center;
③ 令盒子内水平方向平均分配,垂直方向居中
display: flex;
justify-content: space-around;
align-items: center;