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 class="yellow txt">
13             D
14         </view>
15     </view>
16 </template>
17 
18 <script>
19     export default {
20         data() {
21             return {
22                 
23             }
24         },
25         methods: {
26              
27         }
28     }
29 </script>
30 
31 <style>
32     /* 同级目录 */
33  @import url("justify-content.css");
34 </style>

 1  .container{
 2      /* 定义flex容器 */
 3      display: flex;
 4      /* 
 5                  设置容器内部元素的排列方向 
 6                 row: 定义排列方向 从左到右 
 7                 row-reverse: 从右到左
 8                 column: 从上到下
 9                 column-reverse: 从下到上    
10       */
11      flex-direction: column;
12      
13      /*
14             设置元素在主轴上的对齐方式
15             flex-start: 左对齐 或者 向上对齐 (默认)
16             flex-end: 右对齐 ( ABC， 不是CBA ) 或者 向下对齐
17             center: 居中对齐
18             space-between: 两端对齐， 元素之间平均等分 剩余的空白间隙部分
19             space-around: 元素两边 平均等分 剩余的空白间隙部分， 最左（上） 或 最右（下） 和 元素之间距离是1:2
20       */
21      justify-content: space-around;
22      
23      height: 800upx;
24      background-color: antiquewhite;
25     }
26       
27     .txt{
28         font-size: 20px;
29         width: 150upx;
30         height: 150upx;
31     }
32       
33     .red{
34         background-color: red;
35     }
36     
37     .green{
38         background-color: green;
39     }
40     
41     .blue{
42         background-color: blue;
43     }
44     
45     .yellow{
46         background-color: yellow;
47     }
48