Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 1 · 6 / 8Layout with flexbox
Phase 1How the web works
8 topics · 2–3 wks
  1. 1What happens when you open a URL
  2. 2Reading HTML structure
  3. 3Common HTML elements
  4. 4CSS selectors and colours
  5. 5CSS boxes and spacing
  6. 6Layout with flexbox
  7. 7Browser DevTools
  8. 8Put your page online
JourneyPhase 1Layout with flexbox
01 / 09Overview

Layout with flexbox

You'll learn to read flexbox and predict where boxes land in a row or a column.

Why it mattersReact Native lays out every phone screen with flexbox, so this is the layout skill you will use most.
about 2 h·needs: CSS boxes and spacing
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
An interactive guide to flexboxJosh W. Comeau · 30 min · English
MMamun's noteThe best flexbox explanation I know. Play with every demo. Today read up to the end of "Alignment", then the "Gaps" section. Come back for growing and shrinking later.
Video
Learn flexbox the easy wayKevin Powell · YouTube · 34 min · English
MMamun's noteWatch 0:00–7:06, then jump to 20:31 and watch to the end for flex-direction, justify-content and align-items. Skip flex-grow for now.
Tool
Flexbox Froggyflexboxfroggy.com · game · 20 min · English
MMamun's noteA small game where you move frogs with flexbox. Do the first 12 levels. If you get stuck, say out loud which axis you need.
VideoOptional
CSS Flexbox complete guide (Bangla)YouTube · Learn with Sumit · 55 min · Bangla
MMamun's noteThe same ideas in Bangla. Watch 13:13–32:18, the container properties. The rest is useful later.
03 / 09

See it step by step

Change one flexbox value at a time and watch the boxes move.

flex-directionrow
justify-contentflex-start
align-itemsflex-start
Screen|[A][B][C] || || |
row.css
1.row {
2 display: flex;
3 flex-direction: row;
4 justify-content: flex-start;
5 align-items: flex-start;
6}
display flex puts A, B and C in a line. The direction is row, so the main axis runs left to right.
Step 1 / 8
04 / 09

Explanation

You want three buttons side by side with even space, or a photo with your name next to it, centred. By default, boxes stack one under another. You need a way to say "put these in a line, and space them like this".

Think of students lining up for the morning assembly. The teacher does not move each student. The teacher gives the line an instruction: "stand in a row", "move to the middle", "leave a gap". Flexbox works the same way. You style the parent, and the children arrange themselves.

The parent is the flex container. Its direct children are flex items.

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
  • display: flex turns flexbox on. The children now sit in a line.
  • flex-direction picks the line: row (side by side) or column (top to bottom). This line is the main axis.
  • justify-content places items along the main axis: flex-start, center, flex-end, space-between.
  • align-items places items across it, on the other axis: flex-start, center, flex-end, stretch.
  • gap puts space between items, not at the edges.

People often put display: flex on the children instead of the parent, and nothing moves. Put it on the box that holds the items. The other common one: switching to column and expecting justify-content to still move things sideways. It follows the main axis, so now it moves things up and down.

On a phone this matters even more. In React Native every box is a flex container, and the default direction is column, not row.

When you read flexbox, first find the container and its flex-direction. Draw the main axis as an arrow. Then justify-content is "along the arrow" and align-items is "across the arrow".

Words to recognise
flexboxcontaineritemdisplay flexflex-directionmain axiscross axisjustify-contentalign-itemsgap
05 / 09

Code tour

Click a line number with a ring to read the note for that line.

styles.css5 notes
1.profile {
display: flex;
Mentor note · line 2
The photo and the name inside .profile now sit side by side. The default direction is row.
align-items: center;
gap: 16px;
5}
6
7.links {
8 display: flex;
flex-direction: column;
justify-content: flex-start;
11}
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3You want three cards side by side. Where does display: flex go?
  2. 2 / 3In a row container, which line puts the items in the middle, left to right?
  3. 3 / 3With flex-direction: column, what does justify-content: space-between do?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Layout with flexbox?

09 / 09

Done

You can now
Read flex-direction, justify-content, align-items and gap on a container and sketch where its items go.
Next: Browser DevTools Back to Phase 1
On this page
  1. 01Layout with flexbox
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 1How the web works
8 topics · 2–3 wks
  1. 1What happens when you open a URL
  2. 2Reading HTML structure
  3. 3Common HTML elements
  4. 4CSS selectors and colours
  5. 5CSS boxes and spacing
  6. 6Layout with flexbox
  7. 7Browser DevTools
  8. 8Put your page online
JourneyPhase 1Layout with flexbox
01 / 09Overview

Layout with flexbox

You'll learn to read flexbox and predict where boxes land in a row or a column.

Why it mattersReact Native lays out every phone screen with flexbox, so this is the layout skill you will use most.
about 2 h·needs: CSS boxes and spacing
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
An interactive guide to flexboxJosh W. Comeau · 30 min · English
MMamun's noteThe best flexbox explanation I know. Play with every demo. Today read up to the end of "Alignment", then the "Gaps" section. Come back for growing and shrinking later.
Video
Learn flexbox the easy wayKevin Powell · YouTube · 34 min · English
MMamun's noteWatch 0:00–7:06, then jump to 20:31 and watch to the end for flex-direction, justify-content and align-items. Skip flex-grow for now.
Tool
Flexbox Froggyflexboxfroggy.com · game · 20 min · English
MMamun's noteA small game where you move frogs with flexbox. Do the first 12 levels. If you get stuck, say out loud which axis you need.
VideoOptional
CSS Flexbox complete guide (Bangla)YouTube · Learn with Sumit · 55 min · Bangla
MMamun's noteThe same ideas in Bangla. Watch 13:13–32:18, the container properties. The rest is useful later.
03 / 09

See it step by step

Change one flexbox value at a time and watch the boxes move.

flex-directionrow
justify-contentflex-start
align-itemsflex-start
Screen|[A][B][C] || || |
row.css
1.row {
2 display: flex;
3 flex-direction: row;
4 justify-content: flex-start;
5 align-items: flex-start;
6}
display flex puts A, B and C in a line. The direction is row, so the main axis runs left to right.
Step 1 / 8
04 / 09

Explanation

You want three buttons side by side with even space, or a photo with your name next to it, centred. By default, boxes stack one under another. You need a way to say "put these in a line, and space them like this".

Think of students lining up for the morning assembly. The teacher does not move each student. The teacher gives the line an instruction: "stand in a row", "move to the middle", "leave a gap". Flexbox works the same way. You style the parent, and the children arrange themselves.

The parent is the flex container. Its direct children are flex items.

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
  • display: flex turns flexbox on. The children now sit in a line.
  • flex-direction picks the line: row (side by side) or column (top to bottom). This line is the main axis.
  • justify-content places items along the main axis: flex-start, center, flex-end, space-between.
  • align-items places items across it, on the other axis: flex-start, center, flex-end, stretch.
  • gap puts space between items, not at the edges.

People often put display: flex on the children instead of the parent, and nothing moves. Put it on the box that holds the items. The other common one: switching to column and expecting justify-content to still move things sideways. It follows the main axis, so now it moves things up and down.

On a phone this matters even more. In React Native every box is a flex container, and the default direction is column, not row.

When you read flexbox, first find the container and its flex-direction. Draw the main axis as an arrow. Then justify-content is "along the arrow" and align-items is "across the arrow".

Words to recognise
flexboxcontaineritemdisplay flexflex-directionmain axiscross axisjustify-contentalign-itemsgap
05 / 09

Code tour

Click a line number with a ring to read the note for that line.

styles.css5 notes
1.profile {
display: flex;
Mentor note · line 2
The photo and the name inside .profile now sit side by side. The default direction is row.
align-items: center;
gap: 16px;
5}
6
7.links {
8 display: flex;
flex-direction: column;
justify-content: flex-start;
11}
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3You want three cards side by side. Where does display: flex go?
  2. 2 / 3In a row container, which line puts the items in the middle, left to right?
  3. 3 / 3With flex-direction: column, what does justify-content: space-between do?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Layout with flexbox?

09 / 09

Done

You can now
Read flex-direction, justify-content, align-items and gap on a container and sketch where its items go.
Next: Browser DevTools Back to Phase 1
On this page
  1. 01Layout with flexbox
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You want three buttons side by side with even space, or a photo with your name next to it, centred. By default, boxes stack one under another. You need a way to say "put these in a line, and space them like this".

Think of students lining up for the morning assembly. The teacher does not move each student. The teacher gives the line an instruction: "stand in a row", "move to the middle", "leave a gap". Flexbox works the same way. You style the parent, and the children arrange themselves.

The parent is the flex container. Its direct children are flex items.

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
  • display: flex turns flexbox on. The children now sit in a line.
  • flex-direction picks the line: row (side by side) or column (top to bottom). This line is the main axis.
  • justify-content places items along the main axis: flex-start, center, flex-end, space-between.
  • align-items places items across it, on the other axis: flex-start, center, flex-end, stretch.
  • gap puts space between items, not at the edges.

People often put display: flex on the children instead of the parent, and nothing moves. Put it on the box that holds the items. The other common one: switching to column and expecting justify-content to still move things sideways. It follows the main axis, so now it moves things up and down.

On a phone this matters even more. In React Native every box is a flex container, and the default direction is column, not row.

When you read flexbox, first find the container and its flex-direction. Draw the main axis as an arrow. Then justify-content is "along the arrow" and align-items is "across the arrow".

Words to recognise
flexboxcontaineritemdisplay flexflex-directionmain axiscross axisjustify-contentalign-itemsgap

You want three buttons side by side with even space, or a photo with your name next to it, centred. By default, boxes stack one under another. You need a way to say "put these in a line, and space them like this".

Think of students lining up for the morning assembly. The teacher does not move each student. The teacher gives the line an instruction: "stand in a row", "move to the middle", "leave a gap". Flexbox works the same way. You style the parent, and the children arrange themselves.

The parent is the flex container. Its direct children are flex items.

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
  • display: flex turns flexbox on. The children now sit in a line.
  • flex-direction picks the line: row (side by side) or column (top to bottom). This line is the main axis.
  • justify-content places items along the main axis: flex-start, center, flex-end, space-between.
  • align-items places items across it, on the other axis: flex-start, center, flex-end, stretch.
  • gap puts space between items, not at the edges.

People often put display: flex on the children instead of the parent, and nothing moves. Put it on the box that holds the items. The other common one: switching to column and expecting justify-content to still move things sideways. It follows the main axis, so now it moves things up and down.

On a phone this matters even more. In React Native every box is a flex container, and the default direction is column, not row.

When you read flexbox, first find the container and its flex-direction. Draw the main axis as an arrow. Then justify-content is "along the arrow" and align-items is "across the arrow".

Words to recognise
flexboxcontaineritemdisplay flexflex-directionmain axiscross axisjustify-contentalign-itemsgap