{"id":21205,"date":"2013-04-19T08:44:38","date_gmt":"2013-04-19T15:44:38","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=21205"},"modified":"2021-08-04T08:38:51","modified_gmt":"2021-08-04T15:38:51","slug":"order","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/order\/","title":{"rendered":"order"},"content":{"rendered":"\n<p>The <code>order<\/code> property is a sub-property of the <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">Flexible Box Layout module<\/a>.Flex items are displayed in the same order as they appear in the source document by default. The <code>order<\/code> property can be used to change this ordering.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.elememt {\n  order: 3;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">order: &lt;number><\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<p>The following demo shows how the default order (1, 2, 3, 4, 5) has been altered by setting the order property to each item.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_d49b9854fac25043782a031769df7b50\" src=\"\/\/codepen.io\/anon\/embed\/d49b9854fac25043782a031769df7b50?height=450&amp;theme-id=1&amp;slug-hash=d49b9854fac25043782a031769df7b50&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed d49b9854fac25043782a031769df7b50\" title=\"CodePen Embed d49b9854fac25043782a031769df7b50\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\">Other Resources<\/h3>\n\n\n<ul><li><a href=\"http:\/\/www.w3.org\/TR\/css3-flexbox\/#order\" rel=\"noopener\">CSS Flexible Box Layout Module Level 1<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/order\" rel=\"noopener\">MDN documentation<\/a><\/li><li><a href=\"http:\/\/dev.opera.com\/articles\/view\/advanced-cross-browser-flexbox\/#fallbacks\" rel=\"noopener\">Advanced cross-browser flexbox<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">A guide to Flexbox<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/using-flexbox\/\">Using Flexbox<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/old-flexbox-and-new-flexbox\/\">Old Flexbox and new Flexbox<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">10 <sup>1<\/sup><br>11<\/td><td class=\"has-text-align-center\" data-align=\"center\">12+<\/td><td class=\"has-text-align-center\" data-align=\"center\">20+<\/td><td class=\"has-text-align-center\" data-align=\"center\">21-28 <sup>2<\/sup><br>29+<\/td><td class=\"has-text-align-center\" data-align=\"center\">7-8 <sup>2<\/sup><br>9+<\/td><td class=\"has-text-align-center\" data-align=\"center\">12.1+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">iOS<br>Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\"><strong>Chrome Android<\/strong><\/th><th class=\"has-text-align-center\" data-align=\"center\"><strong>Firefox Android<\/strong><\/th><th class=\"has-text-align-center\" data-align=\"center\"><strong>Android<\/strong> Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">7-8.4 <sup>2<\/sup><br>9+<\/td><td class=\"has-text-align-center\" data-align=\"center\">92+<\/td><td class=\"has-text-align-center\" data-align=\"center\">90+<\/td><td class=\"has-text-align-center\" data-align=\"center\">92+<\/td><td class=\"has-text-align-center\" data-align=\"center\"><abbr title=\"Technology Preview\">12.1+<\/abbr><\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_flex-grow\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n\n<ul><li><sup>1<\/sup> Supported with prefix <code>-ms-<\/code><\/li><li><sup>1<\/sup> Supported with prefix <code>-webkit-<\/code><\/li><\/ul>\n\n\n\n<p>For more informations about how to mix syntaxes in order to get the best browser support, please refer to <a href=\"https:\/\/css-tricks.com\/using-flexbox\/\">&#8220;Using Flexbox&#8221;<\/a> and <a href=\"http:\/\/dev.opera.com\/articles\/view\/advanced-cross-browser-flexbox\/#fallbacks\" rel=\"noopener\">this article from DevOpera<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The order property is a sub-property of the Flexible Box Layout module.Flex items are displayed in the same order as they appear in the source document by default. The order property can be used to change this ordering. Syntax Demo The following demo shows how the default order (1, 2, 3, 4, 5) has been [&hellip;]<\/p>\n","protected":false},"author":1888,"featured_media":0,"parent":13939,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":240614,"url":"https:\/\/css-tricks.com\/almanac\/properties\/e\/empty-cells\/","url_meta":{"origin":21205,"position":0},"title":"empty-cells","date":"April 20, 2016","format":false,"excerpt":"The empty-cells property in CSS selects empty table cells for the purpose of specifying whether or not to display borders and backgrounds on them. In other words, it tells the browser whether or not to draw borders around a table cell or fill in the background when that cell contains\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":249476,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/table-layout\/","url_meta":{"origin":21205,"position":1},"title":"table-layout","date":"January 4, 2017","format":false,"excerpt":"The table-layout property defines what algorithm the browser should use to lay out table rows, cells, and columns. table { table-layout: fixed; } As explained in the CSS2.1 specification, table layout in general is usually a matter of taste and will vary depending on design choices. Browsers will, however, automatically\u2026","rel":"","context":"In \"layout\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196155,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-repeat\/","url_meta":{"origin":21205,"position":2},"title":"background-repeat","date":"February 17, 2015","format":false,"excerpt":"If a background-image property is specified, the background-repeat property in CSS defines if (and how) it will repeat. Here's an example: html { background-image: url(logo.png); background-repeat: repeat-x; } These are the possible values for this property (besides the usual stuff like inherit): repeat: tile the image in both directions. This\u2026","rel":"","context":"In \"background-repeat\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198607,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-color\/","url_meta":{"origin":21205,"position":3},"title":"text-decoration-color","date":"April 3, 2015","format":false,"excerpt":"The text-decoration-color property sets the color of the underline, overline, or line-through on text with the text-decoration property applied. It can also set the underline color on links. a { text-decoration-color: #E18728; } Values text-decoration-color can inherit or accept any CSS color value, including named colors, HEX colors, RGBa, and\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":312405,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-thickness\/","url_meta":{"origin":21205,"position":4},"title":"text-decoration-thickness","date":"June 8, 2020","format":false,"excerpt":"The text-decoration-thickness property in CSS sets the stroke thickness of the decoration line that is used on text in an element. The text-decoration-line value needs to be either underline, line-through, or overline to reflect the thickness property. .text { text-decoration-line: underline; \u00a0 text-decoration-thickness: 2px; } Syntax text-decoration-thickness: auto | from-font\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21208,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-self\/","url_meta":{"origin":21205,"position":5},"title":"align-self","date":"April 19, 2013","format":false,"excerpt":"The align-self property is a sub-property of the Flexible Box Layout module. It makes possible to override the align-items value for specific flex items. The align-self property accepts the same 5 values as the align-items: flex-start: cross-start margin edge of the item is placed on the cross-start line flex-end: cross-end\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21205"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1888"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=21205"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21205\/revisions"}],"predecessor-version":[{"id":346083,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21205\/revisions\/346083"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13939"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=21205"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=21205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}