您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章给大家介绍css 中如何使用align-content属性，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
css align-content属性怎么用?
定义和用法
align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。
提示：使用 justify-content 属性对齐主轴上的各项（水平）。
注意：容器内必须有多行的项目，该属性才能渲染出效果。
默认值：stretch
继承：否
可动画化：否。
版本：CSS3
JavaScript 语法：
object.style.alignContent="center"
CSS 语法
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
属性值
● stretch默认值。项目被拉伸以适应容器。
● center项目位于容器的中心。
● flex-start项目位于容器的开头。
● flex-end项目位于容器的结尾。
● space-between项目位于各行之间留有空白的容器内。
● space-around项目位于各行之前、之间、之后都留有空白的容器内。
● initial设置该属性为它的默认值。
● inherit从父元素继承该属性。
实例
对齐弹性盒的 <div> 元素的各项：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>#main { width: 70px; height: 300px; border: 1px solid #c3c3c3; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center;}#main div { width: 70px; height: 70px;}</style></head><body><div id="main"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:pink;"></div></div><p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p><p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p></body></html>关于css 中如何使用align-content属性就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。