OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <style> | |
3 .flex-container { | |
4 background: #333; | |
5 border: 0px; | |
6 display: inline-flex; | |
7 margin: 0px; | |
8 padding: 0px; | |
9 } | |
10 | |
11 .flex-container.flex-direction-row { | |
12 flex-direction : row; | |
13 } | |
14 | |
15 .flex-container.flex-direction-row-reverse { | |
16 flex-direction : row-reverse; | |
17 } | |
18 | |
19 .flex-container.flex-direction-column { | |
20 flex-direction : column; | |
21 } | |
22 | |
23 .flex-container.flex-direction-column-reverse { | |
24 flex-direction : column-reverse; | |
25 } | |
26 | |
27 .flex-container.flex-direction-column-reverse { | |
28 flex-direction : column-reverse; | |
29 } | |
30 | |
31 .flex-container.justify-content-center { | |
32 justify-content: center; | |
33 } | |
34 | |
35 .flex-container.justify-content-space-around { | |
36 justify-content: space-around; | |
37 } | |
38 | |
39 .flex-container.justify-content-space-between { | |
40 justify-content: space-between; | |
41 } | |
42 | |
43 .flex-item { | |
44 width:50px; | |
45 height:50px; | |
46 margin:20px; | |
47 background: #eee; | |
48 line-height: 50px; | |
49 text-align: center; | |
50 } | |
51 </style> | |
52 | |
53 <summary style="display: inline-flex;"> | |
54 <div>these fields</div> | |
55 <div>shouldn't be</div> | |
56 <div>stacked vertically</div> | |
57 </summary> | |
58 | |
59 <h1>flex-direction: row</h1> | |
60 <summary class="flex-container flex-direction-row"> | |
61 <div class="flex-item">1</div> | |
62 <div class="flex-item">2</div> | |
63 <div class="flex-item">3</div> | |
64 </summary> | |
65 | |
66 <h1>flex-direction: row-reverse</h1> | |
67 <summary class="flex-container flex-direction-row-reverse"> | |
68 <div class="flex-item">1</div> | |
69 <div class="flex-item">2</div> | |
70 <div class="flex-item">3</div> | |
71 </summary> | |
72 | |
73 <h1>flex-direction: column</h1> | |
74 <summary class="flex-container flex-direction-column"> | |
75 <div class="flex-item">1</div> | |
76 <div class="flex-item">2</div> | |
77 <div class="flex-item">3</div> | |
78 </summary> | |
79 | |
80 <h1>flex-direction: column-reverse</h1> | |
81 <summary class="flex-container flex-direction-column-reverse"> | |
82 <div class="flex-item">1</div> | |
83 <div class="flex-item">2</div> | |
84 <div class="flex-item">3</div> | |
85 </summary> | |
86 | |
87 <h1>justify-content: center</h1> | |
88 <summary class="flex-container justify-content-center"> | |
89 <div class="flex-item">1</div> | |
90 <div class="flex-item">2</div> | |
91 <div class="flex-item">3</div> | |
92 </summary> | |
93 | |
94 <h1>justify-content: space-around</h1> | |
95 <summary class="flex-container justify-content-space-around"> | |
96 <div class="flex-item">1</div> | |
97 <div class="flex-item">2</div> | |
98 <div class="flex-item">3</div> | |
99 </summary> | |
100 | |
101 <h1>justify-content: space-between</h1> | |
102 <summary class="flex-container justify-content-space-between"> | |
103 <div class="flex-item">1</div> | |
104 <div class="flex-item">2</div> | |
105 <div class="flex-item">3</div> | |
106 </summary> | |
OLD | NEW |