Flexbox

The flex container and its children: main axis and cross axis, justify-content, align-items, gap, and how free space is shared with flex-grow, flex-shrink and flex-basis.

25 cards
5 topics
Free

Study this deck

The outline, topic by topic

Each topic is weighted the way the exam weighs it.

Concepts
Questions
Sort and link
The numbers
Scenarios

A few cards from the deck

Main axis: what is it?
Show the answer
The direction in which a flex container lines up its children: horizontal for row, vertical for column; justify-content distributes space along it.
It changes with flex-direction: in column, justify-content works vertically. This is the source of most mix-ups between justify-content and align-items.
Where is the item in this 400px-tall container?

```css
.conteneur {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
height: 400px;
}
`
- Centred in height, stuck to the right edge
- Centred in width, stuck to the bottom edge
- Stuck to the top, stuck to the right edge
- Centred in height and centred in width
Show the answer
Centred in height, stuck to the right edge
In a column, the main axis is vertical: justify-content: center centres in height. The cross axis is horizontal: align-items: flex-end pushes the item to the right.
display: flex on a parent turns it into a flex container: its direct children become …, laid out along the main axis.
Show the answer
display: flex on a parent turns it into a flex container: its direct children become flex items, laid out along the main axis.
Only direct children are concerned; grandchildren keep their usual layout.
Cross axis: what is it?
Show the answer
The direction perpendicular to the one where children line up; align-items places the items along it.
By default (row), it is the vertical: align-items: center then centres items in height, provided the container has height to share.

Study this deck