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
| <template>
| <div
| :class="{
| 'vux-flex-col': orient === 'vertical',
| 'vux-flex-row': orient === 'horizontal'
| }"
| :style="styles"
| class="vux-flexbox">
| <slot/>
| </div>
| </template>
|
| <script>
| export default {
| name: 'Flexbox',
| props: {
| gutter: {
| type: Number,
| default: 8
| },
| orient: {
| type: String,
| default: 'horizontal'
| },
| justify: String,
| align: String,
| wrap: String,
| direction: String
| },
| computed: {
| styles () {
| const styles = {
| 'justify-content': this.justify,
| '-webkit-justify-content': this.justify,
| 'align-items': this.align,
| '-webkit-align-items': this.align,
| 'flex-wrap': this.wrap,
| '-webkit-flex-wrap': this.wrap,
| 'flex-direction': this.direction,
| '-webkit-flex-direction': this.direction
| }
| return styles
| }
| }
| }
| </script>
|
| <style lang="less">
| .vux-flexbox {
| width: 100%;
| text-align: left;
| display: flex;
| display: -webkit-flex;
| box-align: center;
| align-items: center;
| .vux-flexbox-item {
| flex: 1;
| -webkit-flex: 1;
| min-width: 20px;
| width: 0%;
| &:first-child {
| margin-left: 0 !important;
| margin-top: 0 !important;
| }
| }
| }
|
| .vux-flex-row {
| box-direction: row;
| box-orient: horizontal;
| flex-direction: row;
| }
|
| .vux-flex-col {
| box-orient: vertical;
| flex-direction: column;
| > .vux-flexbox-item {
| width: 100%;
| }
| }
| </style>
|
|
