02-align-items的用法

简介: 02-align-items的用法

侧轴是相对的 默认主轴是x 所以侧轴就是y轴


align-items设置侧轴上的子元素排列的方式(单行)纵轴方向上的对齐方式


align-items: flex-start; 顶部对齐


1425695-20191107225916170-1519352638.png

align-items: center; 居中对齐


align-items: flex-end; 底部对齐


1425695-20191107230041476-183517979.png


align-items:stretch 默认值 拉伸 沿着父级元素侧轴方向拉伸(填满父亲高度)


1425695-20191107230006671-879510067.png


/* 因此实现水平 垂直居中的方式还有一种 */


display: flex; //这是哪个都是使用在方向上


justify-content: center; /*主轴居中对齐*/


align-items: center; /*侧轴居中对齐*/




相关文章
|
监控
云监控
云监控
301 1
|
6月前
|
存储 JSON API
如何将 Swagger 文档导出为 PDF 文件
你会发现自己可能需要将 Swagger 文档导出为 PDF 或文件,以便于共享和存档。在这篇博文中,我们将指导你完成将 Swagger 文档导出为 PDF 格式的过程。
|
JavaScript 前端开发 容器
js之弹性布局使用方法
js之弹性布局使用方法
212 0
|
开发框架 .NET C#
C#学习相关系列之Linq用法---where和select用法(二)
C#学习相关系列之Linq用法---where和select用法(二)
931 2
|
XML 安全 API
REST 和 SOAP API 有什么区别?
【8月更文挑战第31天】
767 0
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
691 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
JavaScript 前端开发 API
Vue Router【详解】含路由配置、路由定义、路由跳转、路由传参、自动注册路由、路由守卫、页面滚动、监听路由、$route、$router、路由过渡动画等
Vue Router【详解】含路由配置、路由定义、路由跳转、路由传参、自动注册路由、路由守卫、页面滚动、监听路由、$route、$router、路由过渡动画等
3013 1
|
Web App开发 存储 监控
如何使用 Chrome DevTools 进行前端性能监控和调试?
如何使用 Chrome DevTools 进行前端性能监控和调试?
|
弹性计算 运维 监控
多云基础设施的统一纳管与运维实践分享
阿里云弹性计算团队十三位产品专家和技术专家共同分享云上运维深度实践,详细阐述如何利用CloudOps工具实现运维提效、弹性降本。
816 1
|
存储 算法 关系型数据库
三范式详解
三范式详解
304 0