当前位置： 首页互联网正文 本文介绍: flex布局的对齐方式 1 弹性盒子组成 /* 弹性容器 */ display:flex; /* 主轴 */ justify–content /* 侧轴*/ align–items 2 主轴对齐方式 /* 默认值 左上角开始 */ justify–content: flex–start; /* 右上角开始 */ justify–content: flex–end; /* 水平居中对齐 重要*/ justify–content: center; /* 间距在子盒子的两侧 */ justify–content: space–around; /* 两端对齐 空间在子盒子之间 重要*/ justify–content: space–between; /* 盒子的所有间距都相等 */ justify–content: space-evenly; 3 侧轴对齐方式 /* 顶部对齐 */ align–items: flex–start; /* 底部对齐 */ align–items: flex–end; /* 垂直居中对齐 重点*/ align-items: center; /*默认值 顶部对齐 当子盒子没有高度时 会将子盒子拉伸充满整个容器 */ align-items: stretch; 4 改变主轴方向 /* 改变主轴方向 默认是水平 从左到右排列 */ flex–direction: row; /* 垂直方向 从上向下 重点*/ flex–direction: column; /* 水平排列 从右向左 */ flex–direction: row–reverse; /* 垂直方向 从下向上 */ flex–direction: column–reverse; 5 强制换行 flex–wrap:wrap 原文地址:https://blog.csdn.net/m0_72027585/article/details/129401672 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若转载，请注明出处：http://www.7code.cn/show_22798.html 如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！ 主题授权提示：请在后台主题设置-主题授权-激活主题的正版授权，授权购买：RiTheme官网显示所有内容声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。contentflexjustify 代码007普通 打赏 收藏 海报 链接
