CSS中如何使用align-content属性 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下CSS中如何使用align-content属性,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

<强>一、CSS align-content属性的定义和使用方法

定义:align-content属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。

作用:会设置自由盒内部各个项目在垂直方向排列方式。

条件:必须对父元素设置属性显示:flex,并且设置换行,flex-wrap:包装这样这个属性的设置才会起作用。

设置:这个属性是对其容器内的项目起作用,所以对父元素进行设置即可。

align-content的取值,使用时可以根据需要取值。

伸展:被拉伸以适应容器(默认值)。
中心:位于容器的中心。
flex-start:位于容器的开头。
flex-end:位于容器的结尾。
之间的空间:位于各行之间留有空白的容器内。
空间:位于各行之前,之间,之后都留有空白的容器内。

<强>二,align-content实例解析

描述:外面一个div里面有四个小的div,为了看清楚效果,给它设置了不同的颜色,然后在大的div里面加上align-content:中心;
让里面的div可以在容器的垂直方向居中。代码如下:

HTML部分:

& lt; div类=癰ox"比; 　　& lt; div风格=氨尘把丈?红色;“祝辞& lt;/div> 　　& lt; div风格=氨尘把丈?橙色;“祝辞& lt;/div> 　　background - color & lt; div风格=?黄色;“祝辞& lt;/div> 　　& lt; div风格=氨尘把丈?绿色,“祝辞& lt;/div> 　　& lt;/div>

CSS部分:

。盒子{ 　　宽度:100 px; 　　身高:300 px; 　　边界:1 px固体# c3c3c3; 　　显示:-webkit-flex; 　　显示:flex; 　　-webkit-flex-wrap:包装; 　　flex-wrap:包装; 　　-webkit-align-content:中心; 　　align-content:中心; 　　} 　　.box div { 　　宽度:100 px; 　　高度:50 px; 　　}

效果图:

CSS中如何使用align-content属性

以上是“CSS中如何使用align-content属性”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!