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; /*侧轴居中对齐*/




相关文章
|
2月前
|
前端开发
前端基础(十二)_overflow属性、clear属性、vertical-align属性
本文详细介绍了CSS中的overflow属性、clear属性和vertical-align属性的用法和效果,并通过实例展示了如何控制元素内容溢出时的显示方式、清除浮动以及对齐行内元素和行内块元素。
55 1
CSS3【display: flex;】与【align-items: 侧轴对齐方式;】的使用
CSS3【display: flex;】与【align-items: 侧轴对齐方式;】的使用
77 0
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
74 0
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置的algin-items;】的使用
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置的algin-items;】的使用
53 0
|
前端开发
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
42 0
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置algin-items;】的使用
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置algin-items;】的使用
75 0
|
容器
Center 中的 widthFactor 与 heightFactor 属性
Center 中的 widthFactor 与 heightFactor 属性
195 0
Center 中的 widthFactor 与 heightFactor 属性
|
Web App开发 测试技术