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




相关文章
|
10月前
CSS3【display: flex;】与【align-items: 侧轴对齐方式;】的使用
CSS3【display: flex;】与【align-items: 侧轴对齐方式;】的使用
45 0
|
10月前
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
43 0
|
9月前
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置的algin-items;】的使用
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置的algin-items;】的使用
27 0
|
9月前
|
前端开发
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
29 0
|
10月前
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置algin-items;】的使用
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置algin-items;】的使用
48 0
|
容器
Center 中的 widthFactor 与 heightFactor 属性
Center 中的 widthFactor 与 heightFactor 属性
139 0
Center 中的 widthFactor 与 heightFactor 属性
|
前端开发 Java 开发者
Display 属性 | 学习笔记
快速学习 Display 属性。
113 0
|
前端开发 容器
css align-items的测试
css align-items的测试
120 0
css align-items的测试

热门文章

最新文章