https://webbling.se/index.php?action=history&feed=atom&title=Order 2026-04-26T20:23:12Z Versionshistorik för denna sida på wikin MediaWiki 1.43.0 https://webbling.se/index.php?title=Order&diff=4597&oldid=prev 2019-01-30T13:51:10Z

<p><span class="autocomment">Exempel</span></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="sv"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Äldre version</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Versionen från 30 januari 2019 kl. 13.51</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l22">Rad 22:</td> <td colspan="2" class="diff-lineno">Rad 22:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Exempel ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Exempel ==</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;codepen pen="pJXejR" height="<del style="font-weight: bold; text-decoration: none;">200</del>" tab="css"&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;codepen pen="pJXejR" height="<ins style="font-weight: bold; text-decoration: none;">300</ins>" tab="css<ins style="font-weight: bold; text-decoration: none;">,result</ins>"&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/codepen&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/codepen&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Egenskapens definition ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Egenskapens definition ==</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>https://drafts.csswg.org/css-flexbox-1/#order-property</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>https://drafts.csswg.org/css-flexbox-1/#order-property</div></td></tr> </table>

PGJ https://webbling.se/index.php?title=Order&diff=1888&oldid=prev 2015-08-26T09:57:54Z

<p>Skapade sidan med &#039;Vanligtvis placeras flexelement ut efter varandra, allt eftersom de är angivna i HTML-koden. Detta är ju även beteendet som vanliga &lt;code&gt;div&lt;/code&gt;-boxar har som standard....&#039;</p> <p><b>Ny sida</b></p><div>Vanligtvis placeras flexelement ut efter varandra, allt eftersom de är angivna i HTML-koden. Detta är ju även beteendet som vanliga &lt;code&gt;div&lt;/code&gt;-boxar har som standard. Men med flexbox kan man välja i vilken ordning saker ska läggas ut. Man använder sig då av &lt;code&gt;order&lt;/code&gt; Se [[Flexbox - byta ordning]] för mer info.<br /> <br /> == Egenskaper ==<br /> {| class=&quot;wikitable&quot;<br /> | Parametrar<br /> | &lt;&#039;&#039;gruppnummer&#039;&#039;&gt;<br /> |-<br /> | Defaultvärde<br /> | 0<br /> |-<br /> | Ärvs?<br /> | Nej<br /> |-<br /> | Animerbart?<br /> | Ja<br /> |-<br /> | Fungerar med...<br /> | Element i flexbehållare<br /> |}<br /> <br /> &lt;&#039;&#039;gruppnummer&#039;&#039;&gt; anger ett tal som visar vilken grupp en flexbox tillhör. Ju lägre gruppnummer den har, desto tidigare sätts den ut. De som delar på samma gruppnummer placeras ut i den ordning de definieras i dokumentet.<br /> <br /> == Exempel ==<br /> &lt;codepen pen=&quot;pJXejR&quot; height=&quot;200&quot; tab=&quot;css&quot;&gt;<br /> &lt;/codepen&gt;<br /> <br /> == Egenskapens definition ==<br /> https://drafts.csswg.org/css-flexbox-1/#order-property</div>

PGJ