flex布局，justify-content
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>
css
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
