Show More
| @@ -14,12 +14,17 b'' | |||||
| 14 | display: box; |
|
14 | display: box; | |
| 15 | box-orient: horizontal; |
|
15 | box-orient: horizontal; | |
| 16 | box-align: stretch; |
|
16 | box-align: stretch; | |
|
|
17 | ||||
|
|
18 | display: flex; | |||
|
|
19 | flex-direction: row; | |||
|
|
20 | align-items: stretch; | |||
| 17 | } |
|
21 | } | |
| 18 |
|
22 | |||
| 19 | .hbox > * { |
|
23 | .hbox > * { | |
| 20 | -webkit-box-flex: 0; |
|
24 | -webkit-box-flex: 0; | |
| 21 | -moz-box-flex: 0; |
|
25 | -moz-box-flex: 0; | |
| 22 | box-flex: 0; |
|
26 | box-flex: 0; | |
|
|
27 | flex: 0; | |||
| 23 | } |
|
28 | } | |
| 24 |
|
29 | |||
| 25 | .vbox { |
|
30 | .vbox { | |
| @@ -36,30 +41,38 b'' | |||||
| 36 | box-align: stretch; |
|
41 | box-align: stretch; | |
| 37 | /* width must be 100% to force FF to behave like webkit */ |
|
42 | /* width must be 100% to force FF to behave like webkit */ | |
| 38 | width: 100%; |
|
43 | width: 100%; | |
|
|
44 | ||||
|
|
45 | display: flex; | |||
|
|
46 | flex-direction: column; | |||
|
|
47 | align-items: stretch; | |||
| 39 | } |
|
48 | } | |
| 40 |
|
49 | |||
| 41 | .vbox > * { |
|
50 | .vbox > * { | |
| 42 | -webkit-box-flex: 0; |
|
51 | -webkit-box-flex: 0; | |
| 43 | -moz-box-flex: 0; |
|
52 | -moz-box-flex: 0; | |
| 44 | box-flex: 0; |
|
53 | box-flex: 0; | |
|
|
54 | flex: 0; | |||
| 45 | } |
|
55 | } | |
| 46 |
|
56 | |||
| 47 | .reverse { |
|
57 | .reverse { | |
| 48 | -webkit-box-direction: reverse; |
|
58 | -webkit-box-direction: reverse; | |
| 49 | -moz-box-direction: reverse; |
|
59 | -moz-box-direction: reverse; | |
| 50 | box-direction: reverse; |
|
60 | box-direction: reverse; | |
|
|
61 | flex-direction: column-reverse; | |||
| 51 | } |
|
62 | } | |
| 52 |
|
63 | |||
| 53 | .box-flex0 { |
|
64 | .box-flex0 { | |
| 54 | -webkit-box-flex: 0; |
|
65 | -webkit-box-flex: 0; | |
| 55 | -moz-box-flex: 0; |
|
66 | -moz-box-flex: 0; | |
| 56 | box-flex: 0; |
|
67 | box-flex: 0; | |
|
|
68 | flex: 0; | |||
| 57 | } |
|
69 | } | |
| 58 |
|
70 | |||
| 59 | .box-flex1 { |
|
71 | .box-flex1 { | |
| 60 | -webkit-box-flex: 1; |
|
72 | -webkit-box-flex: 1; | |
| 61 | -moz-box-flex: 1; |
|
73 | -moz-box-flex: 1; | |
| 62 | box-flex: 1; |
|
74 | box-flex: 1; | |
|
|
75 | flex: 1; | |||
| 63 | } |
|
76 | } | |
| 64 |
|
77 | |||
| 65 | .box-flex { |
|
78 | .box-flex { | |
| @@ -70,15 +83,24 b'' | |||||
| 70 | -webkit-box-flex: 2; |
|
83 | -webkit-box-flex: 2; | |
| 71 | -moz-box-flex: 2; |
|
84 | -moz-box-flex: 2; | |
| 72 | box-flex: 2; |
|
85 | box-flex: 2; | |
|
|
86 | flex: 2; | |||
| 73 | } |
|
87 | } | |
| 74 |
|
88 | |||
| 75 | .box-group1 { |
|
89 | .box-group1 { | |
|
|
90 | /* | |||
|
|
91 | Deprecated | |||
|
|
92 | Grouping isn't supported in http://dev.w3.org/csswg/css-flexbox/ | |||
|
|
93 | */ | |||
| 76 | -webkit-box-flex-group: 1; |
|
94 | -webkit-box-flex-group: 1; | |
| 77 | -moz-box-flex-group: 1; |
|
95 | -moz-box-flex-group: 1; | |
| 78 | box-flex-group: 1; |
|
96 | box-flex-group: 1; | |
| 79 | } |
|
97 | } | |
| 80 |
|
98 | |||
| 81 | .box-group2 { |
|
99 | .box-group2 { | |
|
|
100 | /* | |||
|
|
101 | Deprecated | |||
|
|
102 | Grouping isn't supported in http://dev.w3.org/csswg/css-flexbox/ | |||
|
|
103 | */ | |||
| 82 | -webkit-box-flex-group: 2; |
|
104 | -webkit-box-flex-group: 2; | |
| 83 | -moz-box-flex-group: 2; |
|
105 | -moz-box-flex-group: 2; | |
| 84 | box-flex-group: 2; |
|
106 | box-flex-group: 2; | |
| @@ -88,34 +110,40 b'' | |||||
| 88 | -webkit-box-pack: start; |
|
110 | -webkit-box-pack: start; | |
| 89 | -moz-box-pack: start; |
|
111 | -moz-box-pack: start; | |
| 90 | box-pack: start; |
|
112 | box-pack: start; | |
|
|
113 | justify-content: flex-start; | |||
| 91 | } |
|
114 | } | |
| 92 |
|
115 | |||
| 93 | .end { |
|
116 | .end { | |
| 94 | -webkit-box-pack: end; |
|
117 | -webkit-box-pack: end; | |
| 95 | -moz-box-pack: end; |
|
118 | -moz-box-pack: end; | |
| 96 | box-pack: end; |
|
119 | box-pack: end; | |
|
|
120 | justify-content: flex-end; | |||
| 97 | } |
|
121 | } | |
| 98 |
|
122 | |||
| 99 | .center { |
|
123 | .center { | |
| 100 | -webkit-box-pack: center; |
|
124 | -webkit-box-pack: center; | |
| 101 | -moz-box-pack: center; |
|
125 | -moz-box-pack: center; | |
| 102 | box-pack: center; |
|
126 | box-pack: center; | |
|
|
127 | justify-content: center; | |||
| 103 | } |
|
128 | } | |
| 104 |
|
129 | |||
| 105 | .align-start { |
|
130 | .align-start { | |
| 106 | -webkit-box-align: start; |
|
131 | -webkit-box-align: start; | |
| 107 | -moz-box-align: start; |
|
132 | -moz-box-align: start; | |
| 108 | box-align: start; |
|
133 | box-align: start; | |
|
|
134 | align-content: flex-start; | |||
| 109 | } |
|
135 | } | |
| 110 |
|
136 | |||
| 111 | .align-end { |
|
137 | .align-end { | |
| 112 | -webkit-box-align: end; |
|
138 | -webkit-box-align: end; | |
| 113 | -moz-box-align: end; |
|
139 | -moz-box-align: end; | |
| 114 | box-align: end; |
|
140 | box-align: end; | |
|
|
141 | align-content: flex-end; | |||
| 115 | } |
|
142 | } | |
| 116 |
|
143 | |||
| 117 | .align-center { |
|
144 | .align-center { | |
| 118 | -webkit-box-align: center; |
|
145 | -webkit-box-align: center; | |
| 119 | -moz-box-align: center; |
|
146 | -moz-box-align: center; | |
| 120 | box-align: center; |
|
147 | box-align: center; | |
|
|
148 | align-content: center; | |||
| 121 | } |
|
149 | } | |
General Comments 0
You need to be logged in to leave comments.
Login now