flex布局，flex-direction

flex布局，flex-direction

 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>
13 </template>
14 
15 <script>
16     export default {
17         data() {
18             return {
19                 
20             }
21         },
22         methods: {
23              
24         }
25     }
26 </script>
27 
28 <style>
29     /* 同级目录 */
30  @import url("flex-direction.css");
31 </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-reverse;
12      
13     }
14       
15     .txt{
16         font-size: 20px;
17         width: 150upx;
18         height: 150upx;
19     }
20        
21     .red{
22         background-color: red;
23     }
24     
25     .green{
26         background-color: green;
27     }
28     
29     .blue{
30         background-color: blue;
31     }
32