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