flex布局 居中
2024-09-03 12:42:57
display:flex;
justify-content: center;检查侧轴是否居中,比如古代竖着写字,检查字是否在每条竹简的中央。
display:flex;
align-items: center;检查横轴是否居中,比如现代人是横着写字,检查字是否写在上下横线的中间。
display:flex;
justify-content: center;
align-items: center;
两者都加上就变成了居中的效果。
---------------------------------------------------------------------------------------------------------------
flex布局中align-items 和align-content的区别。align-items和align-content有相同的功能,不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。align-content属性只适用于多行的flex容器。有点难懂,关键词:单行多行,看实例。
对于只有一行的flex元素,align-content是没有效果的,如果改用align-items:center;则会达到预期的效果,如下图
但如果变成多行容器 使用align-items时效果如下
使用align-content效果如下
最新文章
- Oracle 分页实现
- js swipe 图片滑动控件实现 任意尺寸适用任意屏幕
- WPF 界面控件遍历和后台行为绑定写法
- 查看sqlserver数据库的端口号
- 电子科大POJ ";敲错键盘";
- 自动化测试--protractor
- Docker:跨主机容器间通信之overlay [十五]
- 剑指offer面试题17:合并两个排序的链表
- 解惑 [";1";, ";2";, ";3";].map(parseInt) 为何返回[1,NaN,NaN]
- mysql盲注学习-1
- AutoMapper在项目中的应用
- 解题:CQOI 2017 小Q的表格
- Linux操作系统常见安装方式
- 删除N天前的备份文件脚本(windows)
- Leecode刷题之旅-C语言/python-231 2的幂
- SQL Server 2012不支持Microsoft Visual Studio Test Controller 2010
- 【题解】洛谷P2827 [NOIP2016TG] 蚯蚓(优先队列)
- Python2018秋招(笔者亲身经历)
- 教程:VS2010 之TFS入门指南(转载)
- Unity3D管网分析
热门文章
- 4.【Spring Cloud Alibaba】服务容错-sentinel
- linux中的挂载命令
- const与指针、引用
- Android中实现长按照片弹出右键菜单
- mysql 报错:Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column. To disable safe mode, toggle the option in Preferences
- 最短路问题 Dijkstra算法- 路径还原
- 电信IOT平台固件升级
- 数据库自学笔记(2)--- HAVING和WHERE, ANY 和 ALL,IN和EXIST。
- OpenCL中读取image时的坐标
- Web服务器开发