layout flex, flex-direction

layout 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       / * define flex container * /
 . 3       the display: flex;
 . 4       / * 
 . 5                   disposed inside the container element arrangement direction 
 . 6                  Row: arrangement direction defined from left to right 
 . 7                  Row-Reverse: right to left
 . 8                  column: from top to bottom
 . 9                  column-Reverse: from the bottom    
 10        * /
 . 11       Flex-direction: Reverse-column;
 12 is       
13 is      }
 14        
15      .txt {
 16          font-size: 20px;
 . 17          width: 150upx;
 18 is          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