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> | |
54 <legend>Fieldset with display: flex</legend> | |
55 <div>these fieldsshouldn't bestacked vertically</div> | |
56 </fieldset> | |
57 | |
58 <h1>flex-direction: row</h1> | |
59 <div class="flex-container flex-direction-row"> | |
60 <div class="flex-item">1</div> | |
61 <div class="flex-item">2</div> | |
62 <div class="flex-item">3</div> | |
63 </div> | |
64 | |
65 <h1>flex-direction: row-reverse</h1> | |
66 <div class="flex-container flex-direction-row-reverse"> | |
67 <div class="flex-item">1</div> | |
68 <div class="flex-item">2</div> | |
69 <div class="flex-item">3</div> | |
70 </div> | |
71 | |
72 <h1>flex-direction: column</h1> | |
73 <div class="flex-container flex-direction-column"> | |
74 <div class="flex-item">1</div> | |
75 <div class="flex-item">2</div> | |
76 <div class="flex-item">3</div> | |
77 </div> | |
78 | |
79 <h1>flex-direction: column-reverse</h1> | |
80 <div class="flex-container flex-direction-column-reverse"> | |
81 <div class="flex-item">1</div> | |
82 <div class="flex-item">2</div> | |
83 <div class="flex-item">3</div> | |
84 </div> | |
85 | |
86 <h1>justify-content: center</h1> | |
87 <div class="flex-container justify-content-center"> | |
88 <div class="flex-item">1</div> | |
89 <div class="flex-item">2</div> | |
90 <div class="flex-item">3</div> | |
91 </div> | |
92 | |
93 <h1>justify-content: space-around</h1> | |
94 <div class="flex-container justify-content-space-around"> | |
95 <div class="flex-item">1</div> | |
96 <div class="flex-item">2</div> | |
97 <div class="flex-item">3</div> | |
98 </div> | |
99 | |
100 <h1>justify-content: space-between</h1> | |
101 <div class="flex-container justify-content-space-between"> | |
102 <div class="flex-item">1</div> | |
103 <div class="flex-item">2</div> | |
104 <div class="flex-item">3</div> | |
105 </div> | |
OLD | NEW |