flex-flow

CSS flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

浏览器兼容性

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

语法

flex-flow: <'flex-direction'> || <'flex-wrap'>;

flex-flow 的属性值

名称	兼容性	描述
column	Web Android iOS 4.0 3.9 4.11	主轴为垂直方向，起点在上沿。
column-reverse	Web Android iOS 4.0 3.9 4.11	主轴为垂直方向（与column相同），起点在下沿（与column相反）。
row	Web Android iOS 4.0 3.9 4.11	主轴为水平方向，起点在左端。
row-reverse	Web Android iOS 4.0 3.9 4.11	主轴为水平方向（与row相同），起点在右端（与row相反）。
nowrap	Web Android iOS 4.0 3.9 4.11	不换行。
wrap	Web Android iOS 4.0 3.9 4.11	换行，第一行在上方。
wrap-reverse	Web Android iOS 4.0 3.9 4.11	换行（与wrap相同），第一行在下方（与wrap相反）。

适用组件

• view
• scroll-view
• list-view
• list-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>flex-flow: row nowrap</text>
        <view class="common" style="flex-flow: row nowrap">
          <view style="
              width: 50px;
              height: 50px;
              background-color: red;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: green;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: blue;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: red;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: green;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: blue;
              flex-shrink: 0;
            "></view>
        </view>
      </view>

      <view>
        <text>flex-flow: row wrap</text>
        <view class="common" style="flex-flow: row wrap">
          <view style="
              width: 50px;
              height: 50px;
              background-color: red;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: green;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: blue;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: red;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: green;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: blue;
              flex-shrink: 0;
            "></view>
        </view>
      </view>

      <view>
        <text>flex-flow: column nowrap</text>
        <view class="common" style="flex-flow: column nowrap">
          <view style="
              width: 50px;
              height: 50px;
              background-color: red;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: green;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: blue;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: red;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: green;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: blue;
              flex-shrink: 0;
            "></view>
        </view>
      </view>

      <view>
        <text>flex-flow: column wrap</text>
        <view class="common" style="flex-flow: column wrap">
          <view style="
              width: 50px;
              height: 50px;
              background-color: red;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: green;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: blue;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: red;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: green;
              flex-shrink: 0;
            "></view>
          <view style="
              width: 50px;
              height: 50px;
              background-color: blue;
              flex-shrink: 0;
            "></view>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

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

参见

• MDN Reference
• 相关 Bug