align-items

# align-items

CSS align-items 属性将所有直接子节点上的 align-self 值设置为一个组。align-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式。

# uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 浏览器兼容性

Chrome	Edge	Firefox	Opera	Safari	IE
√（ 29 ）	√（ 12 ）	√（ 20 ）	√（ 16 ）	√（ 9 ）	√（ 11 ）

# 语法

align-items: normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ];

# align-items 的属性值

名称

兼容性

描述

center

元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。

flex-start

元素向侧轴起点对齐。

flex-end

元素向侧轴终点对齐。

stretch

弹性项包含外边距的交叉轴尺寸被拉升至行高

baseline

所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。

# 默认值

平台	默认值
uvue	stretch

注意：W3C 默认值为：normal

# 适用组件

# 示例

hello uni-app x

Template

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view style="flex-grow: 1">
      <view>
        <text>align-items: center</text>
        <view class="common" style="align-items: center">
          <view style="width: 50px; height: 50px; background-color: red"></view>
          <view style="width: 50px; height: 50px; background-color: green"></view>
          <view style="width: 50px; height: 50px; background-color: blue"></view>
        </view>
      </view>

      <view>
        <text>align-items: flex-start</text>
        <view class="common" style="align-items: flex-start">
          <view style="width: 50px; height: 50px; background-color: red"></view>
          <view style="width: 50px; height: 50px; background-color: green"></view>
          <view style="width: 50px; height: 50px; background-color: blue"></view>
        </view>
      </view>

      <view>
        <text>align-items: flex-end</text>
        <view class="common" style="align-items: flex-end">
          <view style="width: 50px; height: 50px; background-color: red"></view>
          <view style="width: 50px; height: 50px; background-color: green"></view>
          <view style="width: 50px; height: 50px; background-color: blue"></view>
        </view>
      </view>

      <view>
        <text>align-items: stretch</text>
        <view class="common" style="align-items: stretch">
          <view style="width: 50px; background-color: red"></view>
          <view style="width: 50px; background-color: green"></view>
          <view style="width: 50px; background-color: blue"></view>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<style>
  .common {
    width: 250px;
    height: 250px;
    background-color: gray;
    flex-direction: row;
  }
</style>