Flexbox allows you to control individual items using two special properties:
order and align-self.
Order changes the visual position of an item without changing the HTML.
Align-self allows a single item to align differently from others.
These properties are very useful for building dynamic layouts
Even though the HTML order is Item 1, Item 2, Item 3, the visual order is changed using the order property.
Lower order values appear first.
Align-self allows Box B to align differently from the others.
While the container uses align-items flex-start, this item is centered on the cross axis.
Here, the logo is forced to the left using order and margin.
This technique is often used in navigation bars to control item placement without changing HTML structure.
Important points to remember
- Order changes only the visual order, not the source order
- Align-self overrides align-items for one item
- Use these properties to fine-tune layouts
This example shows how align-self is used to move one section to the bottom while others stretch.
This helps in building flexible card designs.
Practice task
Create a flex container and:
- Add three items
- Change their visual order using order
- Use align-self on one item to center it
- Observe how only that item moves
Next lesson
In the next page, you will build a real layout using all Flexbox concepts together.