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 <!- ->Zoom with
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 is },
32 Methods: {
33 is
34 is }
35 }
36 </ Script >
37 [
38 is < style >
39 / * same directory * /
40 @import URL ( "Flex-items.css");
41 is </ style >
. 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: Row;
12 is
13 is }
14
15 .txt {
16 font-size: 20px;
. 17 width: 150upx;
18 is height: 150upx;
. 19 }
20 is
21 is / *
22 is Order: the order for each element is provided inside the right flex container, the default is 0.
23 is collation, small to large
24 flex-Grow: for amplifying ratio setting element, the default is 0
25 If 0, no amplification
26 is Flex-Shrink: scaling attribute is used to define the default is 1
27 is set to 0 when no scaling
28 negative no effect
29 Flex-Basis: set the length accounting or
30 * /
31 is .red {
32 background-Color: Red;
33 is / * Order:. 3; * /
34 is / Grow-Flex *:. 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