⏺ Ordering Flex Items
Flexbox not only lets you align and space items easily — it also gives you the power to rearrange items visually without changing your HTML markup using the order property.
🧩 What is the order Property?
The order property defines the order in which flex items appear in the layout along the main axis.
📝 By default, all flex items have:
order: 0;You can assign any positive or negative integer to change the visual order.
🧱 Syntax
.flex-item {
order: <integer>;
}Lower numbers appear first
Higher numbers appear later
Items with the same order preserve their HTML source order
🧱 Syntax
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flex Order Playground</title>
<style>
.infographic-flexorder {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--line: #ddd6c9;
box-sizing: border-box;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--paper);
color: var(--ink);
border-radius: 14px;
overflow: hidden;
}
.infographic-flexorder[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1e1e26;
--accent: #5b8def;
--accent-soft:#202942;
--line: #2c313d;
}
.ha-inner { padding: 0.5rem; }
.ha-layout { display: flex; flex-direction: column; gap: 1.1rem; }
.ha-code-wrap {
background: #0b0b0b;
border: 1px solid #2a2a2a;
border-radius: 10px;
overflow: hidden;
}
.ha-filetabs {
display: flex;
background: #161616;
border-bottom: 1px solid #2a2a2a;
}
.ha-filetab {
border: none;
background: transparent;
color: #8a8a8a;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.78rem;
font-weight: 700;
padding: 0.6rem 1rem;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ha-filetab:hover { color: #e5e5e5; }
.ha-filetab.ha-tab-on {
color: #ffffff;
border-bottom-color: #5b8def;
background: #0b0b0b;
}
.ha-codepane { display: none; }
.ha-codepane.ha-pane-on { display: block; }
.ha-tag { color: #60a5fa; font-weight: 700; }
.ha-attr { color: #f2b96b; }
.ha-str { color: #9ece6a; }
.ha-line { display: block; }
.ha-code {
background: #0b0b0b;
border: 1px solid #2a2a2a;
border-radius: 10px;
padding: 0.8rem 1.8rem 0.8rem 0.9rem;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.8rem;
line-height: 1.7;
color: #e5e5e5;
overflow-x: auto;
white-space: pre-wrap;
}
.ha-code .ha-prop { color: #c586c0; }
.ha-code .ha-val { color: #ce9178; }
.ha-code .ha-val-hl { color: #ffd166; font-weight: 700; }
.ha-code .ha-sel { color: #f472b6; font-weight: 700; }
.ha-code .ha-comment { color: #5c6370; font-style: italic; }
.ha-slider-row {
display: grid;
grid-template-columns: 60px 1fr 30px;
align-items: center;
gap: 0.6rem;
}
.ha-slider-row label {
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 0.78rem;
font-weight: 800;
}
.ha-row-a label { color: #2c5f8a; }
.ha-row-b label { color: #1c4a6e; }
.ha-row-c label { color: #123249; }
.ha-slider-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.ha-slider-row .ha-val {
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 0.76rem;
color: var(--ink-soft);
text-align: right;
}
.ha-stage {
background: lightgrey;
border-radius: 8px;
padding: 12px;
display: flex;
gap: 10px;
box-sizing: border-box;
min-height: 90px;
}
.ha-flex-item {
background-color: steelblue;
color: white;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-weight: 700;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
width: 60px;
box-sizing: border-box;
}
.ha-note {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 0.78rem;
color: var(--ink-soft);
}
</style>
</head>
<body>
<div class="infographic-flexorder" id="ha-root">
<div class="ha-inner">
<div class="ha-layout">
<div class="ha-code-wrap">
<div class="ha-filetabs">
<button class="ha-filetab ha-tab-on" id="tab-html">index.html</button>
<button class="ha-filetab" id="tab-css">style.css</button>
</div>
<div class="ha-code"><div class="ha-codepane ha-pane-on" id="pane-html"><span class="ha-line"><<span class="ha-tag">div</span> <span class="ha-attr">class</span>=<span class="ha-str">"container"</span>></span><span class="ha-line"> <<span class="ha-tag">div</span> <span class="ha-attr">class</span>=<span class="ha-str">"box a"</span>>A</<span class="ha-tag">div</span>></span><span class="ha-line"> <<span class="ha-tag">div</span> <span class="ha-attr">class</span>=<span class="ha-str">"box b"</span>>B</<span class="ha-tag">div</span>></span><span class="ha-line"> <<span class="ha-tag">div</span> <span class="ha-attr">class</span>=<span class="ha-str">"box c"</span>>C</<span class="ha-tag">div</span>></span><span class="ha-line"></<span class="ha-tag">div</span>></span></div><div class="ha-codepane" id="code-out"></div></div>
</div>
<div class="ha-slider-row ha-row-a">
<label>.a order</label>
<input type="range" id="s-a" min="-2" max="4" value="2">
<span class="ha-val" id="v-a">2</span>
</div>
<div class="ha-slider-row ha-row-b">
<label>.b order</label>
<input type="range" id="s-b" min="-2" max="4" value="3">
<span class="ha-val" id="v-b">3</span>
</div>
<div class="ha-slider-row ha-row-c">
<label>.c order</label>
<input type="range" id="s-c" min="-2" max="4" value="1">
<span class="ha-val" id="v-c">1</span>
</div>
<div class="ha-stage" id="stage">
<div class="ha-flex-item" id="item-a" style="order:2;">A</div>
<div class="ha-flex-item" id="item-b" style="order:3;">B</div>
<div class="ha-flex-item" id="item-c" style="order:1;">C</div>
</div>
<div class="ha-note" id="note-out">The HTML order never changes (A, B, C) — order only changes how they're PAINTED. Right now: C (order 1) → A (order 2) → B (order 3).</div>
</div>
</div>
</div>
<script>
(function () {
const wrapper = document.getElementById('ha-root');
const bodyAttr = document.body.getAttribute('data-darkmode');
let dark;
if (bodyAttr === 'true') {
dark = true;
} else if (bodyAttr === 'false') {
dark = false;
} else {
const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) wrapper.setAttribute('data-theme', 'dark');
})();
(function () {
const tabHtml = document.getElementById('tab-html');
const tabCss = document.getElementById('tab-css');
const paneHtml = document.getElementById('pane-html');
const paneCss = document.getElementById('code-out');
tabHtml.addEventListener('click', () => {
tabHtml.classList.add('ha-tab-on');
tabCss.classList.remove('ha-tab-on');
paneHtml.classList.add('ha-pane-on');
paneCss.classList.remove('ha-pane-on');
});
tabCss.addEventListener('click', () => {
tabCss.classList.add('ha-tab-on');
tabHtml.classList.remove('ha-tab-on');
paneCss.classList.add('ha-pane-on');
paneHtml.classList.remove('ha-pane-on');
});
})();
(function () {
const sA = document.getElementById('s-a');
const sB = document.getElementById('s-b');
const sC = document.getElementById('s-c');
const vA = document.getElementById('v-a');
const vB = document.getElementById('v-b');
const vC = document.getElementById('v-c');
const itemA = document.getElementById('item-a');
const itemB = document.getElementById('item-b');
const itemC = document.getElementById('item-c');
const items = [itemA, itemB, itemC];
const codeOut = document.getElementById('code-out');
const note = document.getElementById('note-out');
function render() {
const oa = +sA.value, ob = +sB.value, oc = +sC.value;
vA.textContent = oa; vB.textContent = ob; vC.textContent = oc;
const firstRects = items.map(el => el.getBoundingClientRect());
itemA.style.order = oa;
itemB.style.order = ob;
itemC.style.order = oc;
void itemA.offsetHeight;
const lastRects = items.map(el => el.getBoundingClientRect());
items.forEach((el, i) => {
const dx = firstRects[i].left - lastRects[i].left;
el.style.transition = 'none';
el.style.transform = 'translateX(' + dx + 'px)';
});
requestAnimationFrame(() => {
items.forEach(el => {
el.style.transition = 'transform 0.4s cubic-bezier(0.22, 1, 0.36, 1)';
el.style.transform = 'translateX(0)';
});
});
codeOut.innerHTML =
'<span class="ha-sel">.container</span> {\n' +
' <span class="ha-prop">display</span>: <span class="ha-val">flex</span>;\n' +
' <span class="ha-prop">gap</span>: <span class="ha-val">10px</span>;\n' +
'}\n' +
'<span class="ha-sel">.box</span> {\n' +
' <span class="ha-prop">padding</span>: <span class="ha-val">20px</span>;\n' +
' <span class="ha-prop">background</span>: <span class="ha-val">steelblue</span>;\n' +
'}\n' +
'<span class="ha-sel">.a</span> { <span class="ha-prop">order</span>: <span class="ha-val-hl">' + oa + '</span>; }\n' +
'<span class="ha-sel">.b</span> { <span class="ha-prop">order</span>: <span class="ha-val-hl">' + ob + '</span>; }\n' +
'<span class="ha-sel">.c</span> { <span class="ha-prop">order</span>: <span class="ha-val-hl">' + oc + '</span>; }';
const ranked = [['A', oa], ['B', ob], ['C', oc]].sort((x, y) => x[1] - y[1]);
const visualOrder = ranked.map(r => r[0] + ' (order ' + r[1] + ')').join(' → ');
note.textContent = 'The HTML order never changes (A, B, C) — order only changes how they\u2019re PAINTED. Right now: ' + visualOrder + '.';
}
[sA, sB, sC].forEach(el => el.addEventListener('input', render));
render();
})();
</script>
</body>
</html>.demo {
font-family: system-ui, sans-serif;
padding: 16px;
}
.demo h1 {
color: #2563eb;
margin: 0 0 8px;
}
.demo p {
color: #4b5563;
margin: 0;
}document.querySelector('.demo h1')?.addEventListener('click', () => {
alert('Hello from live preview!');
});Even though "C" appears last in HTML, it is shown first on the screen because of its lower order value
✅ Why Use order?
Dynamically rearrange layouts based on screen size using media queries
Change visual order without touching HTML
Build responsive layouts where visual hierarchy matters
⚠️ Best Practices
Use
ordersparingly — overuse can confuse users and screen readers.Prefer HTML order to reflect logical reading order (especially for accessibility).
Helpful in component-based UIs, dashboards, or grid switches.