EveryLike/pages/CSS/flex/flex-flow.uvue

<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>