Order and Align-self - Individual Element Control

Welcome back to the Alexandrian Library! Just as ancient librarians could change the order of scrolls on shelves and position some of them differently from the rest, in Flexbox we have the order and align-self properties that allow individual control of single elements.

Order - Changing Visual Order

The

order

property allows changing the display order of elements without modifying the HTML. This is an incredibly powerful tool for responsive design!

Order Basics

1.item {
2  order: 0;  /* Default value for all elements */
3}
4
5/* Lower value = earlier */
6/* Higher value = later */

Key rules:

• By default, all elements have

  order: 0

• Elements are sorted from lowest to highest order value
• With equal order values, the order depends on the HTML source order
• You can use negative values (

  order: -1

  )

Basic Example

1<div class="container">
2  <div class="item-1">1</div>
3  <div class="item-2">2</div>
4  <div class="item-3">3</div>
5  <div class="item-4">4</div>
6</div>

1.container {
2  display: flex;
3}
4
5/* Default: 1, 2, 3, 4 */
6
7.item-3 {
8  order: -1;  /* Will be first: 3, 1, 2, 4 */
9}
10
11.item-1 {
12  order: 1;  /* Will be last: 3, 2, 4, 1 */
13}
14
15/* Result: 3, 2, 4, 1 */

Practical Example - Responsive Layout

1<div class="layout">
2  <header class="header">Header</header>
3  <nav class="sidebar">Sidebar</nav>
4  <main class="content">Content</main>
5  <aside class="ads">Ads</aside>
6  <footer class="footer">Footer</footer>
7</div>

1.layout {
2  display: flex;
3  flex-wrap: wrap;
4}
5
6/* Desktop - default order */
7.header { order: 1; flex: 0 0 100%; }
8.sidebar { order: 2; flex: 0 0 25%; }
9.content { order: 3; flex: 1; }
10.ads { order: 4; flex: 0 0 20%; }
11.footer { order: 5; flex: 0 0 100%; }
12
13/* Mobile - change order */
14@media (max-width: 768px) {
15  .header { order: 1; }
16  .content { order: 2; }  /* Content before sidebar! */
17  .sidebar { order: 3; }
18  .ads { order: 4; }
19  .footer { order: 5; }
20  
21  /* All full width */
22  .header, .sidebar, .content, .ads, .footer {
23    flex: 0 0 100%;
24  }
25}

Egyptian analogy: It's like a pharaoh rearranging the chambers in a pyramid - the structure remains the same, but the way of navigating changes!

Practical Example - Product Sorting

1<div class="products">
2  <div class="product" data-priority="normal">Product A</div>
3  <div class="product featured" data-priority="high">Product B</div>
4  <div class="product" data-priority="normal">Product C</div>
5  <div class="product sale" data-priority="medium">Product D</div>
6</div>

1.products {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;
5}
6
7.product {
8  flex: 0 0 calc(33.333% - 14px);
9  order: 3;  /* Normal products at the end */
10}
11
12.product.featured {
13  order: 1;  /* Featured at the beginning */
14  border: 3px solid goldenrod;
15}
16
17.product.sale {
18  order: 2;  /* Sale in the middle */
19  background: #e74c3c;
20  color: white;
21}
22
23/* Result: Featured -> Sale -> Normal -> Normal */

Accessibility Notes

IMPORTANT: Order only changes the visual order, not the DOM order!

1<div class="tabs">
2  <button>Tab 1</button>
3  <button>Tab 2</button>
4  <button>Tab 3</button>
5</div>

1.tabs button:first-child {
2  order: 3;  /* Visually last */
3}
4
5/* Problem: Keyboard navigation (Tab) will keep the original order! */

Solution:

• Use order only for visual changes that don't affect the logical flow
• For important order changes, change the order in HTML
• Test keyboard navigation

Align-self - Individual Alignment

The

align-self

property allows overriding

align-items

for a single element.

Align-self Values

1.item {
2  align-self: auto;          /* Inherits from align-items (default) */
3  align-self: flex-start;    /* At the start of the cross axis */
4  align-self: flex-end;      /* At the end of the cross axis */
5  align-self: center;        /* Centered */
6  align-self: baseline;      /* Aligned to text baseline */
7  align-self: stretch;       /* Stretched (if no height) */
8}

Basic Example

1<div class="container">
2  <div class="item">Item 1</div>
3  <div class="item special">Item 2 (Special)</div>
4  <div class="item">Item 3</div>
5</div>

1.container {
2  display: flex;
3  align-items: center;  /* All centered */
4  height: 300px;
5  border: 2px solid #ddd;
6}
7
8.item {
9  padding: 20px;
10  background: #3498db;
11  color: white;
12}
13
14/* One element aligned differently */
15.item.special {
16  align-self: flex-start;  /* This one will be at the top */
17  background: goldenrod;
18}

Practical Examples

1. Card with button at the bottom

1<div class="cards">
2  <div class="card">
3    <h3>Product 1</h3>
4    <p>Short description</p>
5    <button class="btn">Buy Now</button>
6  </div>
7  <div class="card">
8    <h3>Product 2</h3>
9    <p>A very long description that takes up much more space...</p>
10    <button class="btn">Buy Now</button>
11  </div>
12</div>

1.cards {
2  display: flex;
3  gap: 20px;
4}
5
6.card {
7  flex: 1;
8  display: flex;
9  flex-direction: column;
10  padding: 20px;
11  border: 1px solid #ddd;
12}
13
14.card h3,
15.card p {
16  flex: 0;
17}
18
19.card .btn {
20  align-self: stretch;  /* Button at full width */
21  margin-top: auto;  /* Push to bottom */
22}

2. Avatar in chat message

1<div class="message">
2  <img src="avatar.jpg" alt="User" class="avatar">
3  <div class="message-content">
4    <h4>User Name</h4>
5    <p>This is a message that can be long...</p>
6    <span class="timestamp">10:30</span>
7  </div>
8</div>

1.message {
2  display: flex;
3  gap: 15px;
4  align-items: flex-start;  /* Everything at the top */
5  padding: 15px;
6}
7
8.avatar {
9  width: 50px;
10  height: 50px;
11  border-radius: 50%;
12  flex-shrink: 0;
13  align-self: center;  /* Avatar centered vertically */
14}
15
16.message-content {
17  flex: 1;
18}
19
20.timestamp {
21  align-self: flex-end;  /* Timestamp at bottom */
22  font-size: 0.8em;
23  color: #777;
24}

3. Icon toolbar

1<div class="toolbar">
2  <button class="tool">Icon 1</button>
3  <button class="tool">Icon 2</button>
4  <button class="tool large">Big Icon</button>
5  <button class="tool">Icon 3</button>
6</div>

1.toolbar {
2  display: flex;
3  gap: 10px;
4  padding: 10px;
5  background: #34495e;
6  align-items: center;  /* All centered */
7}
8
9.tool {
10  width: 40px;
11  height: 40px;
12  background: #3498db;
13  border: none;
14  color: white;
15  cursor: pointer;
16}
17
18.tool.large {
19  width: 60px;
20  height: 60px;
21  align-self: flex-start;  /* Aligned to top */
22  background: goldenrod;
23}

Order + Align-self - Combination

You can use both properties simultaneously:

1<div class="hero">
2  <div class="hero-image">Image</div>
3  <div class="hero-content">Content</div>
4</div>

1.hero {
2  display: flex;
3  align-items: center;
4  min-height: 500px;
5  gap: 40px;
6}
7
8.hero-image {
9  flex: 0 0 50%;
10  order: 2;  /* Image on the right */
11}
12
13.hero-content {
14  flex: 1;
15  order: 1;  /* Content on the left */
16  align-self: flex-start;  /* Content at the top */
17}
18
19/* On mobile */
20@media (max-width: 768px) {
21  .hero {
22    flex-direction: column;
23  }
24  
25  .hero-image {
26    order: 1;  /* Image on top */
27    flex: 0 0 auto;
28  }
29  
30  .hero-content {
31    order: 2;  /* Content below */
32    align-self: stretch;  /* Full width */
33  }
34}

Practical Patterns

1. Featured item first

1.grid {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 20px;
5}
6
7.grid-item {
8  flex: 0 0 calc(33.333% - 14px);
9  order: 2;
10}
11
12.grid-item.featured {
13  flex: 0 0 100%;
14  order: 1;  /* Always first */
15  align-self: stretch;
16  background: goldenrod;
17}

2. Sticky footer in card

1.card {
2  display: flex;
3  flex-direction: column;
4  height: 100%;
5}
6
7.card-header {
8  flex: 0 0 auto;
9}
10
11.card-body {
12  flex: 1;
13}
14
15.card-footer {
16  flex: 0 0 auto;
17  align-self: stretch;
18  margin-top: auto;  /* Always at the bottom */
19}

3. Responsive form

1.form {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 15px;
5}
6
7.form-field {
8  flex: 0 0 calc(50% - 7.5px);
9}
10
11.form-field.full {
12  flex: 0 0 100%;
13}
14
15.form-submit {
16  flex: 0 0 auto;
17  order: 999;  /* Always at the end */
18  align-self: flex-end;
19  margin-top: 10px;
20}
21
22@media (max-width: 768px) {
23  .form-field {
24    flex: 0 0 100%;
25  }
26  
27  .form-submit {
28    align-self: stretch;  /* Full width on mobile */
29  }
30}

Summary

Order:

• Changes the visual order of elements
• Does not change DOM order (accessibility!)
• Great for responsive design
• Negative values are allowed
• Default:

  order: 0

Align-self:

• Overrides

  align-items

  for a single element
• Values: flex-start, flex-end, center, baseline, stretch, auto
• Works only on the cross axis
• Default:

  align-self: auto

  (inherits from align-items)

When to use:

• Order - when you need to change the order on different breakpoints
• Align-self - when one element should be aligned differently from the rest

Remember: Order and align-self are like the pharaoh's special orders for individual blocks in a pyramid - they allow exceptions to general rules, giving full control over the layout!