flex-direction

# flex-direction

CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。

# uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 语法

flex-direction: row | row-reverse | column | column-reverse;

# flex-direction 的属性值

名称

兼容性

描述

row

flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。

row-reverse

表现和 row 相同，但是置换了主轴起点和主轴终点

column

flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同

column-reverse

表现和column相同，但是置换了主轴起点和主轴终点

# 默认值

平台	默认值
uvue	column

注意：W3C 默认值为：row

# 适用组件

# 示例

hello uni-app x

Template

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view style="flex-grow: 1">
      <view>
        <text>flex-direction: row</text>
        <view class="common" style="flex-direction: row">
          <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>flex-direction: row-reverse</text>
        <view class="common" style="flex-direction: row-reverse">
          <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>flex-direction: column</text>
        <view class="common" style="flex-direction: column">
          <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>flex-direction: column-reverse</text>
        <view class="common" style="flex-direction: column-reverse">
          <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;
  }
</style>