购物车
登陆 / 注册
微信扫码登陆

推荐手册

align-content

align-content
align-content主要是设置自由盒内部各个项目在垂直方向排列方式
编辑:前端控 前端控 更新时间:2019-03-23 13:49:50

align-content属性

含义:

设置自由盒内部各个项目在垂直方向排列方式

使用条件

必须对父元素设置自由盒属性display:flex,并且设置为横向排列以及换行flex-flow:row wrap,这样这个属性的设置才会起作用。 

注意:容器内必须有多行的项目,该属性才能渲染出效果。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本

属性                                     
浏览器        IE     Chrome      Firefox       Safari      Opera
align-content

       11.0

       21.0         28.09.0/7.0 -webkit-       12.1

CSS语法:

align-content:stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

未设置align-content时的HTML+CSS代码

实例

<style type="text/css">
	.box{
		width:220px;
		height: 298px;
		border: 1px solid #ccc;	
	}	
	.box1{
		width:200px;
		height:100px;
		border: 1px solid #ccc;
		margin:10px;
		background: pink;
	} 
	.box2{
		width:200px;
		height:100px;
		border: 1px solid #ccc;
		margin:10px;
		background: skyblue;
	}
	</style>

</head>
<body>
<div class="box">
	<div class="box1"></div>
	<div class="box2"></div>
</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 10.jpg

align-content的属性值

stretch:默认值,元素被拉伸以适应容器

各行将会伸展以占用剩余的空间,填充方式为给每个项目下方增加空白。第一个项目默认从容器顶端开始排列(如果剩余的空间是负数,该值等效于'flex-start')

实例

.box{
display: flex;
flex-flow: row wrap;
align-content:stretch; 
	}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图

center:元素位于容器的中心

各行向中间位置堆叠。取消项目之间的空白并把所有项目垂直居中(如果剩下的空间是负数,则各行会向两个方向溢出的相等距离)

实例

.box{
display: flex;
flex-flow: row wrap;
align-content:center; 
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

flex-start:元素位于容器的开头

各行向起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界,之后的每一行都紧靠住前面一行。

实例

.box{
display: flex;
flex-flow: row wrap;
align-content:flex-start; 
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 10.jpg

flex-end:元素位于容器的结尾

各行向结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界,之后的每一行都紧靠住前面一行。

实例

.box{
display: flex;
flex-flow: row wrap;
align-content:flex-end; 
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 13.jpg

space-between:元素位于各行之间留有空白的容器内

在垂直方向两端对齐,即上面的项目对齐容器顶部,最下面一个项目对齐容器底部。留相同间隔在每个项目之间(如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'flex-start')

实例

.box{
display: flex;
flex-flow: row wrap;
align-content:space-between; 
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 14.jpg

space-around:元素上下左右都会留有空白

元素位于各行之前、之间、之后都留有空白的容器内。(如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'center')

实例

.box{
display: flex;
flex-flow: row wrap;
align-content:space-around; 
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 15.jpg

initial    设置该属性为它的默认值。请参考 initial

inherit    从父元素继承该属性。请参考 inherit    

注意:Internet Explorer, Firefox, 和 Safari 浏览器不支持 align-content 属性

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号