justify-content

# justify-content

CSS justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。

# uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 浏览器兼容性

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

# 语法

justify-content: normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ];

# justify-content 的属性值

名称

兼容性

描述

center

元素紧密地排列在主轴方向居中对齐

flex-start

元素紧密地排列在容器主轴起始侧

flex-end

元素紧密地排列在容器主轴结束侧

space-between

在主轴上均匀分配元素。相邻元素间距离相同。第一个元素与主轴首对齐，最后一个元素与主轴尾对齐

space-around

元素沿着主轴均匀分布在容器中。相邻项之间的间距，主轴起始位置到第一个元素的间距，主轴结束位置到最后一个元素的间距，都完全一样

# 默认值

平台	默认值
uvue	flex-start

注意：W3C 默认值为：normal

# 适用组件

# 示例

hello uni-app x

Template

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view style="flex-grow: 1">
      <view>
        <text>justify-content: center</text>
        <view class="common" style="justify-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>
      </view>

      <view>
        <text>justify-content: flex-start</text>
        <view class="common" style="justify-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>
      </view>

      <view>
        <text>justify-content: flex-end</text>
        <view class="common" style="justify-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>
      </view>

      <view>
        <text>justify-content: space-between</text>
        <view class="common" style="justify-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>
      </view>

      <view>
        <text>justify-content: space-around</text>
        <view class="common" style="justify-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>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

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