Most flex properties go on the container. These two go on a single item.
order
By default items appear in the order of the HTML, which is order: 0 for all. A higher number moves an item later, a lower or negative number earlier.
index.html
HTML
<style>
.container { background: #f4f9fc; border: 2px dashed #1a5276; padding: 8px; }
.box { background: #d94a00; color: #fff; padding: 12px 18px; font-weight: bold; }
.container { display: flex; gap: 6px; }
</style>
<div class="container">
<div class="box">1 (HTML first)</div>
<div class="box" style="order: -1">2 (order: -1)</div>
<div class="box">3</div>
</div>Box 2 appears first even though it is second in the HTML.
dangerous
Order is visual only
Keyboard focus and screen readers follow the HTML order. If you move something a long way with
order, the experience becomes confusing. Use order for small adjustments, such as moving a sidebar below the content on mobile.align-self
align-items on the container aligns every item. align-self lets one item break the rule.
index.html
HTML
<style>
.container { background: #f4f9fc; border: 2px dashed #1a5276; padding: 8px; }
.box { background: #d94a00; color: #fff; padding: 12px 18px; font-weight: bold; }
.container { display: flex; align-items: flex-start; height: 120px; gap: 6px; }
</style>
<div class="container">
<div class="box">flex-start</div>
<div class="box" style="align-self:center">center</div>
<div class="box" style="align-self:flex-end">flex-end</div>
<div class="box" style="align-self:stretch">stretch</div>
</div>It accepts the same values as align-items.
A practical use: push one item away
In a flex row, margin-left: auto on an item pushes it, and everything after it, to the far end:
style.css
CSS
.nav { display: flex; gap: 16px; }
.nav .login { margin-left: auto; }
lightbulb
A common login layout
With logo and links on the left and a button on the right, you do not need
justify-content: space-between. Use margin-left: auto on the button.