css align-content属性怎么用?

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>

效果输出:

486aab48c7061ff8ce65fd32cb10a06.png

以上就是css align-content属性怎么用?的详细内容,更多请关注龙方网络其它相关文章!

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: