2分钟掌握CSS flexbox布局 和 Grid 布局

flex布局速记 交叉轴横向

/* 靠右对齐 */
.a{
    justify-content: flex-end;
}
/* 居中对齐 */
.a{
    justify-content: center;
}
/* 平分空间 */
.a{
    justify-content: space-evenly;
}
/* 两端对齐 */
.a{
    justify-content: space-between;
}

flex布局速记 交叉轴竖向

/* 靠下对齐 */
.a{
    align-items: flex-end;
}
/* 居中对齐 */
.a{
    align-items: center;
}

flex布局速记 改变主轴方向

/*将主轴方向从默认的横向改为竖向排列*/
.a{
   flex-direction: column;
}

/* flex占比调整 */
.a{
    flex: 1;
}

/*注: 改变主轴方向后原来横向代码将变为竖向,相反竖向代码将变为横向*/