What Do justify-content, align-items, and align-self Do in Flexbox?
Understand justify-content, align-items, and align-self in flexbox — main axis vs cross axis alignment explained clearly.
Expected Interview Answer
`justify-content` aligns flex items along the main axis (the flex-direction), `align-items` aligns items along the cross axis for the whole container, and `align-self` overrides that cross-axis alignment for one individual item.
Flexbox has two axes defined by `flex-direction`: the main axis (row by default, left to right) and the cross axis (perpendicular to it, column by default). `justify-content` (set on the container) controls how extra space is distributed among items along the main axis — values like `flex-start`, `center`, `space-between`, and `space-around` change how items bunch or spread out horizontally in a row layout. `align-items` (also on the container) controls how items are positioned along the cross axis — for a row layout, that means vertical alignment, with values like `flex-start`, `center`, `stretch` (the default, filling the cross-axis size), and `baseline`. `align-self` is the same set of values as `align-items` but applied to a single child, letting one item opt out of the container's shared cross-axis alignment without affecting its siblings. Understanding which axis is “main” versus “cross” is the key mental model — swapping `flex-direction: column` flips which property controls horizontal versus vertical alignment.
- justify-content controls spacing/alignment along the main (flex-direction) axis
- align-items sets cross-axis alignment for every item at once
- align-self lets one item override the container's cross-axis alignment individually
- The main/cross axis mental model transfers cleanly when flex-direction changes
AI Mentor Explanation
justify-content is like deciding how fielders are spread along the boundary rope — bunched near one end, evenly spaced, or with gaps between them. align-items is like setting how deep or shallow every fielder stands from the pitch by default, applied to the whole team at once. align-self is like pulling just one fielder in closer or further out than the rest of the team's default depth, without moving anyone else. Those two independent decisions — spacing along the rope versus depth from the pitch — map exactly onto the main-axis and cross-axis controls in flexbox.
Step-by-Step Explanation
Step 1
Identify the main axis
flex-direction (row by default) determines which direction is “main” and which is “cross”.
Step 2
Set justify-content on the container
Controls spacing/alignment of items along the main axis (e.g., space-between, center).
Step 3
Set align-items on the container
Controls alignment of all items along the cross axis (default stretch).
Step 4
Override with align-self on a child
One item can set its own cross-axis alignment independently of align-items.
What Interviewer Expects
- Correctly identifying which axis each property targets
- Awareness that flex-direction: column swaps which property controls horizontal vs vertical
- Knowing align-items default is stretch, not flex-start
- Understanding align-self overrides align-items for a single item only
Common Mistakes
- Mixing up justify-content (main axis) with align-items (cross axis)
- Forgetting stretch is the default value for align-items
- Assuming align-self affects sibling items too (it only affects one)
- Not accounting for flex-direction: column flipping which axis is which
Best Answer (HR Friendly)
“In flexbox, justify-content controls spacing along the main direction your items are flowing — like left to right in a row — while align-items controls how they line up in the other direction, like top to bottom. align-self is just a way to make one single item break from that shared alignment and do its own thing.”
Code Example
.toolbar {
display: flex;
flex-direction: row;
justify-content: space-between; /* main axis: spread items horizontally */
align-items: center; /* cross axis: vertically center all items */
height: 60px;
}
.toolbar .badge {
align-self: flex-start; /* this one item ignores center, sticks to the top */
}Follow-up Questions
- How does flex-direction: column change what justify-content and align-items control?
- What is the difference between align-items and align-content?
- How does align-self: stretch interact with a fixed height on the child?
- How would you center a single item both horizontally and vertically with flexbox?
MCQ Practice
1. In a default row flex container, what does justify-content control?
justify-content operates along the main axis, which is horizontal for row (the default).
2. What is the default value of align-items?
Items stretch to fill the cross-axis size of the container by default.
3. What does align-self do differently from align-items?
align-self applies the same cross-axis values as align-items but scoped to one child.
Flash Cards
What axis does justify-content target? — The main axis, set by flex-direction.
What axis does align-items target? — The cross axis, for all items at once.
What is align-items default value? — stretch.
What does align-self do? — Overrides cross-axis alignment for one individual item.