OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <style> | |
3 .flex-container { | |
4 background: #333; | |
5 border: 0px; | |
6 display: 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 <fieldset style="display: flex;"> | |
54 <legend>Fieldset with display: flex</legend> | |
55 <div>these fields</div> | |
56 <div>shouldn't be</div> | |
57 <div>stacked vertically</div> | |
58 </fieldset> | |
59 | |
60 <h1>flex-direction: row</h1> | |
61 <fieldset class="flex-container flex-direction-row"> | |
62 <div class="flex-item">1</div> | |
63 <div class="flex-item">2</div> | |
64 <div class="flex-item">3</div> | |
65 </fieldset> | |
66 | |
67 <h1>flex-direction: row-reverse</h1> | |
68 <fieldset class="flex-container flex-direction-row-reverse"> | |
69 <div class="flex-item">1</div> | |
70 <div class="flex-item">2</div> | |
71 <div class="flex-item">3</div> | |
72 </fieldset> | |
73 | |
74 <h1>flex-direction: column</h1> | |
75 <fieldset class="flex-container flex-direction-column"> | |
76 <div class="flex-item">1</div> | |
77 <div class="flex-item">2</div> | |
78 <div class="flex-item">3</div> | |
79 </fieldset> | |
80 | |
81 <h1>flex-direction: column-reverse</h1> | |
82 <fieldset class="flex-container flex-direction-column-reverse"> | |
83 <div class="flex-item">1</div> | |
84 <div class="flex-item">2</div> | |
85 <div class="flex-item">3</div> | |
86 </fieldset> | |
87 | |
88 <h1>justify-content: center</h1> | |
89 <fieldset class="flex-container justify-content-center"> | |
90 <div class="flex-item">1</div> | |
91 <div class="flex-item">2</div> | |
92 <div class="flex-item">3</div> | |
93 </fieldset> | |
94 | |
95 <h1>justify-content: space-around</h1> | |
96 <fieldset class="flex-container justify-content-space-around"> | |
97 <div class="flex-item">1</div> | |
98 <div class="flex-item">2</div> | |
99 <div class="flex-item">3</div> | |
100 </fieldset> | |
101 | |
102 <h1>justify-content: space-between</h1> | |
103 <fieldset class="flex-container justify-content-space-between"> | |
104 <div class="flex-item">1</div> | |
105 <div class="flex-item">2</div> | |
106 <div class="flex-item">3</div> | |
107 </fieldset> | |
OLD | NEW |