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