OnlineCBT
Override one item without changing the whole row
align-self controls an individual flex item's cross-axis alignment. It overrides the parent's align-items value for that item when applicable. Auto margins can absorb free space and are useful for pushing a footer or action to an edge.
.row {
display: flex;
align-items: flex-start;
min-height: 8rem;
gap: 1rem;
}
.row__featured { align-self: center; }
.card {
display: flex;
flex-direction: column;
}
.card__action { margin-top: auto; }The featured item centres itself on the row's cross axis. In a vertically arranged card with available height, the action's auto top margin pushes it toward the bottom. It does not create height by itself; the card needs available space for that margin to absorb.
Centre a box in both axes
.stage {
display: flex;
justify-content: center;
align-items: center;
min-height: 20rem;
padding: 1rem;
}A direct child is centred within the available area. min-height allows the stage to grow when content is taller. A rigid height plus overflow:hidden can clip long content and should not be used merely to make a screenshot look centred.
Avoid a visual-order mismatch
Do not combine centring with arbitrary order changes that separate visible arrangement from focus order. The most robust layout usually starts with the correct HTML reading sequence and then aligns those items.
Auto margin interaction
An auto margin on the relevant axis can consume free space before alignment distribution. If align-self seems ineffective, inspect the item's margins and cross-size. Likewise, an item filling all available cross space has no extra space in which to move.
Exercises
- Align one button at the bottom of a tall row using align-self:flex-end.
- Build equal-height cards with different description lengths and push each action down with margin-top:auto.
- Increase text size and confirm the centred panel can grow rather than hiding content.
- Explain why align-self does not control the main-axis position in the same way as justify-content.
