0

0

css align-content属性怎么用

青灯夜游

青灯夜游

发布时间:2019-02-15 15:17:30

|

4498人浏览过

|

来源于php中文网

原创

align-content属性是用来设置自由盒内部各个项目在垂直方向排列方式。

css align-content属性怎么用

CSS align-content属性

作用:align-content属性是用来设置自由盒内部各个项目在垂直方向排列方式;它修改了flex-wrap属性的行为。

使用条件:

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

立即学习前端免费学习笔记(深入)”;

说明:该align-content属性是对其容器内部的项目起作用,对父元素进行设置;容器内必须有多行的项目,才能渲染出效果。

语法:

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

取值说明:

stretch:默认值,元素被拉伸以适应容器,会拉伸容器内每个项目占用的空间,填充方式为给每个项目下方增加空白。

AdsGo AI
AdsGo AI

全自动 AI 广告专家,助您在数分钟内完成广告搭建、优化及扩量

下载

center:取消项目之间的空白并把所有项目垂直居中,使得元素位于容器的中心。

flex-start:取消项目之间的空白,并把项目放在容器顶部,使得元素位于容器的开头。

flex-end:取消项目之间的空白并把项目放在容器底部,使得元素位于容器的结尾。

space-between:使项目在垂直方向两端对齐。即上面的项目对齐容器顶部,最下面一个项目对齐容器底部。留相同间隔在每个项目之间。

space-around:使每个项目上下位置保留相同长度空白,使得项目之间的空白为两倍的单个项目空白。

CSS align-content属性使用示例







align-content属性

效果图:

1.jpg

相关专题

更多
高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

4

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

3

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

10

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

15

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

42

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

7

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

9

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

6

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
AngularJS教程
AngularJS教程

共24课时 | 2.6万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.1万人学习

PHP基础入门课程
PHP基础入门课程

共33课时 | 1.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号