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