排列方式为行(主轴为水平方向,侧轴为垂直方向)
1、给父元素添加弹性布局
display: flex;
2、给父元素添加 justify-content 属性 (水平居中)
justify-content 属性决定了主轴方向上子项的对齐和分布方式
3、给父元素添加 align-items 属性(垂直居中)
align-items : 每一行中的子元素上下对齐方式
排列方式为列(主轴为垂直方向,侧轴为水平方向)
1、给父元素上添加弹性布局
display: flex;
2、给父元素添加 justify-content 属性 (垂直居中)
justify-content 属性决定了主轴方向上子项的对齐和分布方式
3、给父元素添加 align-items 属性(水平居中)
align-items : 每一行中的子元素上下对齐方式
例如:排列方式为行的情况
效果图: