flex布局，flex-item

flex布局，flex-item

 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         <!-- 缩放用的 -->
13 <!--         <view class="green txt">
14             D
15         </view>
16         <view class="red txt">
17             E
18         </view>
19         <view class="blue txt">
20             F
21         </view> -->
22     </view>
23 </template>
24 
25 <script>
26     export default {
27         data() {
28             return {
29                 
30             }
31         },
32         methods: {
33              
34         } 
35     }
36 </script>
37 
38 <style>
39     /* 同级目录 */
40  @import url("flex-items.css");
41 </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: row;
12      
13     }
14       
15     .txt{
16         font-size: 20px;
17         width: 150upx;
18         height: 150upx;
19     }
20     
21     /*
22         order: 用于吧设置flex容器内部的 每个元素的 排列顺序， 默认是0
23                排序规则， 有小到大
24         flex-grow: 用于设置元素的放大比例， 默认为0
25                    如果为0， 则不放大
26         flex-shrink: 用于定义属性的 缩放比例， 默认为1
27                      设置为 0 的时候， 不进行缩放
28                      负数没效果
29         flex-basis: 设置长度或者占比         
30     */       
31     .red{
32         background-color: red;
33         /* order: 3; */
34         /* flex-grow: 1; */
35         flex-shrink: 0;
36         flex-basis: 100upx;
37     }
38     
39     .green{
40         background-color: green;
41         /* order: 2; */
42         /* flex-grow: 1; */
43         flex-shrink: 0;
44     }
45     
46     .blue{
47         background-color: blue;
48         /* order: 1 */
49         /* flex-grow: 1; */
50         flex-shrink: 0;
51     }
52  

 

转载于:https://www.cnblogs.com/wo1ow1ow1/p/11124277.html