【CSS】Flex布局及Quasar辅助类之Container_quasar justify-end

Flex布局及Quasar Flex CSS辅助类

Quasar Flex CSS 辅助类指的是Quasar框架已经定义了一些CSS类，帮助我们实现了CSS效果，我们可以在div上直接使用这些类即可，不用再写CSS样式了。不了解Quasar框架可以不用关注相关代码。

作用在Flex容器上的属性

作用在flex容器上的属性，帮助flex容器管理容器内的子元素。

1.flex-direction 主轴对齐方向

方向分为水平方向和垂直方向，在水平方向上可以设置左端为起点或者右端为起点，在垂直方向上可以设置为上端为起点或下端为起点。

1.1 原始CSS

属性值为：

• row 水平方向 起点在左端 默认值
• row-reverse 水平方向 起点在右端
• column 垂直方向 起点在上方
• column-reverse 垂直方向 起点在下方

<template>
  <p>原始CSS样式 row</p>
  <div class="root flex-test">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 row-reverse</p>
  <div class="root flex-test1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</template>

<style>
.root {
  border: solid 1px #faccdd;
  margin: 10px;
}

.flex-test {
  display: flex;
  flex-direction: row;
}

.flex-test1 {
  display: flex;
  flex-direction: row-reverse;
}

.item {
  background-color: #adffcc;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

.flex-test {
  display: flex;
  flex-direction: column;
}

.flex-test1 {
  display: flex;
  flex-direction: column-reverse;
}
1
2
3
4
5
6
7
8
9

1.2 Quasar Flex CSS

• row
• row inline
• column
• column inline
• row reverse
• column reverse

注意：
以上的Quasar Flex CSS辅助类除了包含flex-direction属性外还包含flex-wrap，这个属性接下来会讲到。

2.flex-wrap

当flex容器内的子元素一行显示不下时，应该如何换行。

2.1 原始CSS

属性值为：

• nowrap 不换行，如果显示不下会压缩子元素的宽度或高度。默认值。
• wrap 换行，第二行在第一行下面
• wrap-reverse 换行，第二行在第一行上面

<template>

  <p>原始CSS样式 nowrap</p>
  <div class="root flex-test">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 wrap</p>
  <div class="root flex-test1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
<p>原始CSS样式 wrap-reverse</p>
  <div class="root flex-test2">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</template>


<style>
.root {
  border: solid 1px #faccdd;
  margin: 10px;
}

.flex-test {
  display: flex;
  flex-wrap: nowrap;
}

.flex-test1 {
  display: flex;
  flex-wrap: wrap;
}
.flex-test2 {
  display: flex;
  flex-wrap: wrap-reverse;
}
.item {
  background-color: #adffcc;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

2.2 Quasar Flex CSS

• wrap
• no-wrap
• reverse-wrap

3.flex-flow

是flex-direction和flex-wrap的简写形式

flex-flow: flex-direction flex-wrap;

flex-flow: row wrap;
1

4.justify-content

子元素在主轴的对齐方式。如果要是有换行，这个效果也会作用到第二行上。第一行与第二行独立计算对齐方式。

4.1 原始CSS

属性值为：

• flex-start 左对齐，默认值。
• flex-end 右对齐
• center 居中对齐
• space-between 两端对齐，项目之间间隔相等
• space-around 项目两侧间隔相等，项目之间的间隔与项目与容器边框的间隔大一倍
• space-evenly 项目间隔平均分

<template>
  <p>原始CSS样式 flex-start</p>
  <div class="root flex-test">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 flex-end</p>
  <div class="root flex-test1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 center</p>
  <div class="root flex-test2">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 space-between</p>
  <div class="root flex-test3">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 space-around</p>
  <div class="root flex-test4">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 space-evenly</p>
  <div class="root flex-test5">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</template>


<style>
.root {
  border: solid 1px #faccdd;
  margin: 10px;
}

.flex-test {
  display: flex;
  justify-content: flex-start;
}

.flex-test1 {
  display: flex;
  justify-content: flex-end;
}

.flex-test2 {
  display: flex;
   justify-content: center;
}
.flex-test3 {
  display: flex;
   justify-content: space-between;
}
.flex-test4 {
  display: flex;
   justify-content: space-around;
}
.flex-test5 {
  display: flex;
   justify-content: space-evenly;
}
.item {
  background-color: #adffcc;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

将flex-test到flex-test5都加flex-wrap:wrap;样式后，我们可以看到多行时的效果。

4.2 Quasar Flex CSS

• justify-start
• justify-end
• justify-center
• justify-between
• justify-around
• justify-evenly

5.align-items

子元素在交叉轴方向上应该如何对齐

5.1 原始CSS

属性值为：

• flex-start 起点对齐
• flex-end 终点对齐
• center 中点对齐
• baseline 基于第一行文字的基线对齐
• stretch 子元素未设置高度或者为auto时才生效，沾满整个容器高度，默认值

<template>
  <p>原始CSS样式 flex-start</p>
  <div class="root flex-test">
    <div class="item1">1</div>
    <div class="item1">2</div>
    <div class="item1">3</div>
    <div class="item1">4</div>
    <div class="item1">5</div>
  </div>
  <p>原始CSS样式 flex-end</p>
  <div class="root flex-test1">
    <div class="item1">1</div>
    <div class="item1">2</div>
    <div class="item1">3</div>
    <div class="item1">4</div>
    <div class="item1">5</div>
  </div>
<p>原始CSS样式 center</p>
  <div class="root flex-test2">
    <div class="item1">1</div>
    <div class="item1">2</div>
    <div class="item1">3</div>
    <div class="item1">4</div>
    <div class="item1">5</div>
  </div>
  <p>原始CSS样式 baseline</p>
  <div class="root flex-test3">
    <div class="item1">1</div>
    <div class="item1">2</div>
    <div class="item1">3</div>
    <div class="item1">4</div>
    <div class="item1">5</div>
  </div>
  <p>原始CSS样式 stretch</p>
  <div class="root flex-test4">
    <div class="item2">1</div>
    <div class="item2">2</div>
    <div class="item2">3</div>
    <div class="item2">4</div>
    <div class="item2">5</div>
  </div>
</template>


<style>
.root {
  height: 80px;
  border: solid 1px #faccdd;
  margin: 5px;
}

.flex-test {
  display: flex;
  align-items: flex-start;
}

.flex-test1 {
  display: flex;
  align-items: flex-end;
}

.flex-test2 {
  display: flex;
   align-items: center;
}

.flex-test3 {
  display: flex;
  align-items: baseline;
}

.flex-test4 {
  display: flex;
 align-items: stretch;
}

.flex-test5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.item1 {
  background-color: #adffcc;
  width: 50px;
  height: 50px;
  margin: 5px;
}
.item2 {
  background-color: #adffcc;
  width: 50px;
  margin: 5px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

5.2 Quasar Flex CSS

• items-start
• items-end
• items-center
• items-stretch
• items-baseline

6.align-content

多根轴线对齐方式，说白了就是轴线在交叉轴上的对齐方式。

6.1 原始CSS

属性值为：

• flex-start
• flex-end
• center
• space-between
• space-around
• stretch 默认值 轴线沾满整个交叉轴

6.2 Quasar Flex CSS

• content-start
• content-end
• content-center
• content-stretch
• content-between
• content-around