##// END OF EJS Templates
Change stretch to flex-start
Jonathan Frederic -
Show More
@@ -1,201 +1,201 b''
1
1
2 /* Flexible box model classes */
2 /* Flexible box model classes */
3 /* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
3 /* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
4
4
5 /* This file is a compatability layer. It allows the usage of flexible box
5 /* This file is a compatability layer. It allows the usage of flexible box
6 model layouts accross multiple browsers, including older browsers. The newest,
6 model layouts accross multiple browsers, including older browsers. The newest,
7 universal implementation of the flexible box model is used when available (see
7 universal implementation of the flexible box model is used when available (see
8 `Modern browsers` comments below). Browsers that are known to implement this
8 `Modern browsers` comments below). Browsers that are known to implement this
9 new spec completely include:
9 new spec completely include:
10
10
11 Firefox 28.0+
11 Firefox 28.0+
12 Chrome 29.0+
12 Chrome 29.0+
13 Internet Explorer 11+
13 Internet Explorer 11+
14 Opera 17.0+
14 Opera 17.0+
15
15
16 Browsers not listed, including Safari, are supported via the styling under the
16 Browsers not listed, including Safari, are supported via the styling under the
17 `Old browsers` comments below.
17 `Old browsers` comments below.
18 */
18 */
19
19
20
20
21 .hbox {
21 .hbox {
22 /* Old browsers */
22 /* Old browsers */
23 display: -webkit-box;
23 display: -webkit-box;
24 -webkit-box-orient: horizontal;
24 -webkit-box-orient: horizontal;
25 -webkit-box-align: stretch;
25 -webkit-box-align: stretch;
26
26
27 display: -moz-box;
27 display: -moz-box;
28 -moz-box-orient: horizontal;
28 -moz-box-orient: horizontal;
29 -moz-box-align: stretch;
29 -moz-box-align: stretch;
30
30
31 display: box;
31 display: box;
32 box-orient: horizontal;
32 box-orient: horizontal;
33 box-align: stretch;
33 box-align: stretch;
34
34
35 /* Modern browsers */
35 /* Modern browsers */
36 display: flex;
36 display: flex;
37 flex-direction: row;
37 flex-direction: row;
38 align-items: stretch;
38 align-items: flex-start;
39 }
39 }
40
40
41 .hbox > * {
41 .hbox > * {
42 /* Old browsers */
42 /* Old browsers */
43 -webkit-box-flex: 0;
43 -webkit-box-flex: 0;
44 -moz-box-flex: 0;
44 -moz-box-flex: 0;
45 box-flex: 0;
45 box-flex: 0;
46
46
47 /* Modern browsers */
47 /* Modern browsers */
48 flex: none;
48 flex: none;
49 }
49 }
50
50
51 .vbox {
51 .vbox {
52 /* Old browsers */
52 /* Old browsers */
53 display: -webkit-box;
53 display: -webkit-box;
54 -webkit-box-orient: vertical;
54 -webkit-box-orient: vertical;
55 -webkit-box-align: stretch;
55 -webkit-box-align: stretch;
56
56
57 display: -moz-box;
57 display: -moz-box;
58 -moz-box-orient: vertical;
58 -moz-box-orient: vertical;
59 -moz-box-align: stretch;
59 -moz-box-align: stretch;
60
60
61 display: box;
61 display: box;
62 box-orient: vertical;
62 box-orient: vertical;
63 box-align: stretch;
63 box-align: stretch;
64 /* width must be 100% to force FF to behave like webkit */
64 /* width must be 100% to force FF to behave like webkit */
65 width: 100%;
65 width: 100%;
66
66
67 /* Modern browsers */
67 /* Modern browsers */
68 display: flex;
68 display: flex;
69 flex-direction: column;
69 flex-direction: column;
70 align-items: stretch;
70 align-items: flex-start;
71 }
71 }
72
72
73 .vbox > * {
73 .vbox > * {
74 /* Old browsers */
74 /* Old browsers */
75 -webkit-box-flex: 0;
75 -webkit-box-flex: 0;
76 -moz-box-flex: 0;
76 -moz-box-flex: 0;
77 box-flex: 0;
77 box-flex: 0;
78
78
79 /* Modern browsers */
79 /* Modern browsers */
80 flex: none;
80 flex: none;
81 }
81 }
82
82
83 .reverse {
83 .reverse {
84 /* Old browsers */
84 /* Old browsers */
85 -webkit-box-direction: reverse;
85 -webkit-box-direction: reverse;
86 -moz-box-direction: reverse;
86 -moz-box-direction: reverse;
87 box-direction: reverse;
87 box-direction: reverse;
88
88
89 /* Modern browsers */
89 /* Modern browsers */
90 flex-direction: row-reverse;
90 flex-direction: row-reverse;
91 }
91 }
92
92
93 .box-flex0 {
93 .box-flex0 {
94 /* Old browsers */
94 /* Old browsers */
95 -webkit-box-flex: 0;
95 -webkit-box-flex: 0;
96 -moz-box-flex: 0;
96 -moz-box-flex: 0;
97 box-flex: 0;
97 box-flex: 0;
98
98
99 /* Modern browsers */
99 /* Modern browsers */
100 flex: none;
100 flex: none;
101 width: auto;
101 width: auto;
102 }
102 }
103
103
104 .box-flex1 {
104 .box-flex1 {
105 /* Old browsers */
105 /* Old browsers */
106 -webkit-box-flex: 1;
106 -webkit-box-flex: 1;
107 -moz-box-flex: 1;
107 -moz-box-flex: 1;
108 box-flex: 1;
108 box-flex: 1;
109
109
110 /* Modern browsers */
110 /* Modern browsers */
111 flex: 1;
111 flex: 1;
112 }
112 }
113
113
114 .box-flex {
114 .box-flex {
115 /* Old browsers */
115 /* Old browsers */
116 .box-flex1();
116 .box-flex1();
117 }
117 }
118
118
119 .box-flex2 {
119 .box-flex2 {
120 /* Old browsers */
120 /* Old browsers */
121 -webkit-box-flex: 2;
121 -webkit-box-flex: 2;
122 -moz-box-flex: 2;
122 -moz-box-flex: 2;
123 box-flex: 2;
123 box-flex: 2;
124
124
125 /* Modern browsers */
125 /* Modern browsers */
126 flex: 2;
126 flex: 2;
127 }
127 }
128
128
129 .box-group1 {
129 .box-group1 {
130 /* Deprecated */
130 /* Deprecated */
131 -webkit-box-flex-group: 1;
131 -webkit-box-flex-group: 1;
132 -moz-box-flex-group: 1;
132 -moz-box-flex-group: 1;
133 box-flex-group: 1;
133 box-flex-group: 1;
134 }
134 }
135
135
136 .box-group2 {
136 .box-group2 {
137 /* Deprecated */
137 /* Deprecated */
138 -webkit-box-flex-group: 2;
138 -webkit-box-flex-group: 2;
139 -moz-box-flex-group: 2;
139 -moz-box-flex-group: 2;
140 box-flex-group: 2;
140 box-flex-group: 2;
141 }
141 }
142
142
143 .start {
143 .start {
144 /* Old browsers */
144 /* Old browsers */
145 -webkit-box-pack: start;
145 -webkit-box-pack: start;
146 -moz-box-pack: start;
146 -moz-box-pack: start;
147 box-pack: start;
147 box-pack: start;
148
148
149 /* Modern browsers */
149 /* Modern browsers */
150 justify-content: flex-start;
150 justify-content: flex-start;
151 }
151 }
152
152
153 .end {
153 .end {
154 /* Old browsers */
154 /* Old browsers */
155 -webkit-box-pack: end;
155 -webkit-box-pack: end;
156 -moz-box-pack: end;
156 -moz-box-pack: end;
157 box-pack: end;
157 box-pack: end;
158
158
159 /* Modern browsers */
159 /* Modern browsers */
160 justify-content: flex-end;
160 justify-content: flex-end;
161 }
161 }
162
162
163 .center {
163 .center {
164 /* Old browsers */
164 /* Old browsers */
165 -webkit-box-pack: center;
165 -webkit-box-pack: center;
166 -moz-box-pack: center;
166 -moz-box-pack: center;
167 box-pack: center;
167 box-pack: center;
168
168
169 /* Modern browsers */
169 /* Modern browsers */
170 justify-content: center;
170 justify-content: center;
171 }
171 }
172
172
173 .align-start {
173 .align-start {
174 /* Old browsers */
174 /* Old browsers */
175 -webkit-box-align: start;
175 -webkit-box-align: start;
176 -moz-box-align: start;
176 -moz-box-align: start;
177 box-align: start;
177 box-align: start;
178
178
179 /* Modern browsers */
179 /* Modern browsers */
180 align-items: flex-start;
180 align-items: flex-start;
181 }
181 }
182
182
183 .align-end {
183 .align-end {
184 /* Old browsers */
184 /* Old browsers */
185 -webkit-box-align: end;
185 -webkit-box-align: end;
186 -moz-box-align: end;
186 -moz-box-align: end;
187 box-align: end;
187 box-align: end;
188
188
189 /* Modern browsers */
189 /* Modern browsers */
190 align-items: flex-end;
190 align-items: flex-end;
191 }
191 }
192
192
193 .align-center {
193 .align-center {
194 /* Old browsers */
194 /* Old browsers */
195 -webkit-box-align: center;
195 -webkit-box-align: center;
196 -moz-box-align: center;
196 -moz-box-align: center;
197 box-align: center;
197 box-align: center;
198
198
199 /* Modern browsers */
199 /* Modern browsers */
200 align-items: center;
200 align-items: center;
201 }
201 }
General Comments 0
You need to be logged in to leave comments. Login now