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

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

苏画
2021-10-21 / 0 评论 / 253 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年10月21日,已超过1089天没有更新,若内容或图片失效,请留言反馈。
播放预览
剧集列表
Flex Box 布局
Grid 布局

css flex.jpg

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;
}

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

评论 (0)

取消