align-content

CSS 的 align-content 属性用于设置交叉轴方向多个行或列的分布方式

uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

语法

align-content: normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>;

align-content 的属性值

名称	兼容性	描述
center	Web Android iOS 4.0 3.9 4.11	所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
flex-start	Web Android iOS 4.0 3.9 4.11	所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
flex-end	Web Android iOS 4.0 3.9 4.11	所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
space-between	Web Android iOS 4.0 3.9 4.11	所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。
space-around	Web Android iOS 4.0 3.9 4.11	所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
stretch	Web Android iOS 4.0 3.9 4.11	拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。

默认值

平台	默认值
uvue	stretch

注意：W3C 默认值为：normal

按W3C规范，normal值在弹性布局（display: flex）中行为与stretch一致，详情参考：CSS Box Alignment。

适用组件

• view
• scroll-view
• list-view
• list-item
• flow-item
• swiper-item
• navigator

示例

hello uni-app x

扫码体验（手机浏览器跳转到App直达页）

扫码体验

Template

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view style="flex-grow: 1">
      <view>
        <text>align-content: center</text>
        <view class="common" style="align-content: 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 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-content: flex-start</text>
        <view class="common" style="align-content: 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 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-content: flex-end</text>
        <view class="common" style="align-content: 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 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-content: space-between</text>
        <view class="common" style="align-content: space-between">
          <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 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-content: space-around</text>
        <view class="common" style="align-content: space-around">
          <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 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-content: stretch</text>
        <view class="common" style="align-content: 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 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-flow: row wrap;
  }
</style>

参见

• MDN Reference
• 相关 Bug