forked from AbhishekThorat/flexbox-polyfills
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
158 lines (146 loc) · 3.52 KB
/
index.js
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
// Flexbox display
export function flexbox() {
return `
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
`;
};
// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
export function flex(values) {
return `
-webkit-box-flex: ${values};
-moz-box-flex: ${values};
-webkit-flex: ${values};
-ms-flex: ${values};
flex: ${values};
`;
};
// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
export function flexDirection(direction) {
return `
-webkit-flex-direction: ${direction};
-moz-flex-direction: ${direction};
-ms-flex-direction: ${direction};
flex-direction: ${direction};
`;
};
// Flex Line Wrapping
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
export function flexWrap(wrap) {
return `
-webkit-flex-wrap: ${wrap};
-moz-flex-wrap: ${wrap};
-ms-flex-wrap: ${wrap};
flex-wrap: ${wrap};
`;
};
// Flex Direction and Wrap
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
export function flexFlow(flow) {
return `
-webkit-flex-flow: ${flow};
-moz-flex-flow: ${flow};
-ms-flex-flow: ${flow};
flex-flow: ${flow};
`;
};
// Display Order
// - applies to: flex items
// <integer>
export function order(val) {
return `
-webkit-box-ordinal-group: ${val};
-moz-box-ordinal-group: ${val};
-ms-flex-order: ${val};
-webkit-order: ${val};
order: ${val};
`;
};
// Flex grow factor
// - applies to: flex items
// <number>
export function flexGrow(grow) {
return `
-webkit-flex-grow: ${grow};
-moz-flex-grow: ${grow};
-ms-flex-grow: ${grow};
flex-grow: ${grow};
`;
};
// Flex shrink
// - applies to: flex item shrink factor
// <number>
export function flexShrink(shrink) {
return `
-webkit-flex-shrink: ${shrink};
-moz-flex-shrink: ${shrink};
-ms-flex-shrink: ${shrink};
flex-shrink: ${shrink};
`;
};
// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width>
export function flexBasis(width) {
return `
-webkit-flex-basis: ${width};
-moz-flex-basis: ${width};
-ms-flex-basis: ${width};
flex-basis: ${width};
`;
};
// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around
export function justifyContent(justify) {
return `
-webkit-justify-content: ${justify};
-moz-justify-content: ${justify};
-ms-justify-content: ${justify};
justify-content: ${justify};
-ms-flex-pack: ${justify};
`;
};
// Packing Flex Lines
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch
export function alignContent(align) {
return `
-webkit-align-content: ${align};
-moz-align-content: ${align};
-ms-align-content: ${align};
align-content: ${align};
`;
};
// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch
export function alignItems(align) {
return `
-webkit-align-items: ${align};
-moz-align-items: ${align};
-ms-align-items: ${align};
align-items: ${align};
`;
};
// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch
export function alignSelf(align) {
return `
-webkit-align-self: ${align};
-moz-align-self: ${align};
-ms-align-self: ${align};
align-self: ${align};
`;
};