Align Items
CSS align-items
属性将所有直接子节点上的 align-self 值设置为一个组。align-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式。
语法
Class | 属性 | 描述 |
---|---|---|
items-center | align-items: center; | 元素在侧轴居中 |
items-start | align-items: flex-start; | 元素向侧轴起点对齐 |
items-end | align-items: flex-end; | 元素向侧轴终点对齐 |
items-stretch | align-items: stretch; | 弹性项包含外边距的交叉轴尺寸被拉升至行高 |
适用组件
基本视图容器 | 可滚动视图容器 | 列表组件 | list-view子组件 | swiper子组件 | 页面链接 |
---|---|---|---|---|---|
view | scroll-view | list-view | list-item | swiper-item | navigator |
示例
items-center
元素在侧轴居中。如果元素在侧轴上的高度高于其容器,那么在两个方向上溢出距离相同。
items-start
元素向侧轴起点对齐。
items-end
元素向侧轴终点对齐。
items-stretch
弹性项包含外边距的交叉轴尺寸被拉升至行高