1 弹性盒子组成

/* 弹性容器 */

display:flex;

/* 主轴 */

justifycontent

/* 侧轴*/

alignitems

2 主轴对齐方式

/* 默认值 左上角开始 */

justifycontent: flexstart;

/* 右上角开始 */

justifycontent: flexend;

/* 水平居中对齐 重要*/

justifycontent: center;

/* 间距在子盒子的两侧 */

justifycontent: spacearound;

/* 两端对齐 空间在子盒子之间 重要*/

justifycontent: spacebetween;

/* 盒子的所有间距都相等 */

justifycontent: space-evenly;

3 侧轴对齐方式

/* 顶部对齐 */

alignitems: flexstart;

/* 底部对齐 */

alignitems: flexend;

/* 垂直居中对齐 重点*/

align-items: center;

/*默认值 顶部对齐 当子盒子没有高度时 会将子盒子拉伸充满整个容器 */

align-items: stretch;

4 改变主轴方向

/* 改变主轴方向 默认是水平 从左到右排列 */

flexdirection: row;

/* 垂直方向 从上向下 重点*/

flexdirection: column;

/* 水平排列 从右向左 */

flexdirection: rowreverse;

/* 垂直方向 从下向上 */

flexdirection: columnreverse;

5 强制换行 flexwrap:wrap

原文地址:https://blog.csdn.net/m0_72027585/article/details/129401672

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_22798.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注