html align 属性,align-content

align-content属性

含义：

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

使用条件

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

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

浏览器支持

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

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

浏览器IEChromeFirefoxSafariOpera

align-content11.021.028.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代码

实例

.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;

}

运行实例 »

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

效果图：

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;

}

运行实例 »

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

效果图：

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

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

实例

.box{

display: flex;

flex-flow: row wrap;

align-content:flex-end;

}

运行实例 »

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

效果图：

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

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

实例

.box{

display: flex;

flex-flow: row wrap;

align-content:space-between;

}

运行实例 »

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

效果图：

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

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

实例

.box{

display: flex;

flex-flow: row wrap;

align-content:space-around;

}

运行实例 »

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

效果图：

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

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

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