OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <style> | 2 <style> |
3 .flex-container { | 3 .flex-container { |
4 background: #333; | 4 background: #333; |
5 border: 0px; | 5 border: 0px; |
6 display: flex; | 6 display: flex; |
7 margin: 0px; | 7 margin: 0px; |
8 padding: 0px; | 8 padding: 0px; |
9 } | 9 } |
10 | 10 |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
43 .flex-item { | 43 .flex-item { |
44 width:50px; | 44 width:50px; |
45 height:50px; | 45 height:50px; |
46 margin:20px; | 46 margin:20px; |
47 background: #eee; | 47 background: #eee; |
48 line-height: 50px; | 48 line-height: 50px; |
49 text-align: center; | 49 text-align: center; |
50 } | 50 } |
51 </style> | 51 </style> |
52 | 52 |
53 <fieldset style="display: flex;"> | 53 <summary style="display: flex;"> |
54 <legend>Fieldset with display: flex</legend> | |
55 <div>these fields</div> | 54 <div>these fields</div> |
56 <div>shouldn't be</div> | 55 <div>shouldn't be</div> |
57 <div>stacked vertically</div> | 56 <div>stacked vertically</div> |
58 </fieldset> | 57 </summary> |
59 | 58 |
60 <h1>flex-direction: row</h1> | 59 <h1>flex-direction: row</h1> |
61 <fieldset class="flex-container flex-direction-row"> | 60 <summary class="flex-container flex-direction-row"> |
62 <div class="flex-item">1</div> | 61 <div class="flex-item">1</div> |
63 <div class="flex-item">2</div> | 62 <div class="flex-item">2</div> |
64 <div class="flex-item">3</div> | 63 <div class="flex-item">3</div> |
65 </fieldset> | 64 </summary> |
66 | 65 |
67 <h1>flex-direction: row-reverse</h1> | 66 <h1>flex-direction: row-reverse</h1> |
68 <fieldset class="flex-container flex-direction-row-reverse"> | 67 <summary class="flex-container flex-direction-row-reverse"> |
69 <div class="flex-item">1</div> | 68 <div class="flex-item">1</div> |
70 <div class="flex-item">2</div> | 69 <div class="flex-item">2</div> |
71 <div class="flex-item">3</div> | 70 <div class="flex-item">3</div> |
72 </fieldset> | 71 </summary> |
73 | 72 |
74 <h1>flex-direction: column</h1> | 73 <h1>flex-direction: column</h1> |
75 <fieldset class="flex-container flex-direction-column"> | 74 <summary class="flex-container flex-direction-column"> |
76 <div class="flex-item">1</div> | 75 <div class="flex-item">1</div> |
77 <div class="flex-item">2</div> | 76 <div class="flex-item">2</div> |
78 <div class="flex-item">3</div> | 77 <div class="flex-item">3</div> |
79 </fieldset> | 78 </summary> |
80 | 79 |
81 <h1>flex-direction: column-reverse</h1> | 80 <h1>flex-direction: column-reverse</h1> |
82 <fieldset class="flex-container flex-direction-column-reverse"> | 81 <summary class="flex-container flex-direction-column-reverse"> |
83 <div class="flex-item">1</div> | 82 <div class="flex-item">1</div> |
84 <div class="flex-item">2</div> | 83 <div class="flex-item">2</div> |
85 <div class="flex-item">3</div> | 84 <div class="flex-item">3</div> |
86 </fieldset> | 85 </summary> |
87 | 86 |
88 <h1>justify-content: center</h1> | 87 <h1>justify-content: center</h1> |
89 <fieldset class="flex-container justify-content-center"> | 88 <summary class="flex-container justify-content-center"> |
90 <div class="flex-item">1</div> | 89 <div class="flex-item">1</div> |
91 <div class="flex-item">2</div> | 90 <div class="flex-item">2</div> |
92 <div class="flex-item">3</div> | 91 <div class="flex-item">3</div> |
93 </fieldset> | 92 </summary> |
94 | 93 |
95 <h1>justify-content: space-around</h1> | 94 <h1>justify-content: space-around</h1> |
96 <fieldset class="flex-container justify-content-space-around"> | 95 <summary class="flex-container justify-content-space-around"> |
97 <div class="flex-item">1</div> | 96 <div class="flex-item">1</div> |
98 <div class="flex-item">2</div> | 97 <div class="flex-item">2</div> |
99 <div class="flex-item">3</div> | 98 <div class="flex-item">3</div> |
100 </fieldset> | 99 </summary> |
101 | 100 |
102 <h1>justify-content: space-between</h1> | 101 <h1>justify-content: space-between</h1> |
103 <fieldset class="flex-container justify-content-space-between"> | 102 <summary class="flex-container justify-content-space-between"> |
104 <div class="flex-item">1</div> | 103 <div class="flex-item">1</div> |
105 <div class="flex-item">2</div> | 104 <div class="flex-item">2</div> |
106 <div class="flex-item">3</div> | 105 <div class="flex-item">3</div> |
107 </fieldset> | 106 </summary> |
OLD | NEW |