flex布局，flex-wrap

flex布局，flex-wrap

 1 <template>
 2     <view class="container">
 3         <view class="green txt">
 4             A
 5         </view> 
 6         <view class="red txt">
 7             B
 8         </view>
 9         <view class="blue txt">
10             C
11         </view>
12         <view class="pink txt">
13             D
14         </view>
15         <view class="orange txt">
16             E
17         </view>
18         <view class="brown txt">
19             F
20         </view>
21         
22 
23     </view>
24 </template>
25 
26 <script>
27     export default {
28         data() {
29             return {
30                 
31             }
32         },
33         methods: {
34              
35         }
36     }
37 </script>
38 
39 <style>
40     /* 同级目录 */
41  @import url("flex-wrap.css");
42 </style>

css

 1  .container{
 2      /* 定义flex容器 */
 3      display: flex;
 4      /* 
 5                  设置容器内部元素的排列方向 
 6                 row: 定义排列方向 从左到右 
 7                 row-reverse: 从右到左
 8                 column: 从上到下
 9                 column-reverse: 从下到上    
10       */
11      flex-direction: column;
12      
13      /*
14           nowrap: 不换行
15           wrap: 换行
16       */
17      flex-wrap: wrap;
18      
19      height: 600upx;
20      background-color: #8F8F94;
21     }
22       
23     .txt{
24         font-size: 20px;
25         width: 150upx;
26         height: 150upx;
27     }
28       
29     .red{
30         background-color: red;
31     }
32     
33     .green{
34         background-color: green;
35     }
36     
37     .blue{
38         background-color: blue;
39     }
40     
41     .brown{
42         background-color: brown;
43     }
44 
45     .orange{
46         background-color: orange;
47     }
48     
49     .pink{
50         background-color: pink;
51     }
52     
53