Lessons · Coding · beginner · Coder Coder

CSS Flexbox for beginners (mini course)

The video “CSS Flexbox for beginners (mini course)” by Coder Coder as 10 lessons, with the idea explained, the code from the screen, steps to try in the practice terminal, practice problems with solutions and a quiz that leads back to the moment.

10lessons
15pieces of code
21exercises
31questions
30min of video
Open the lessons →Every lesson is free for now
CSS Flexbox for beginners (mini course), video by Coder Coder▶ 29:43 · Coder Coder
12345678910
0:0010 lessons across the whole video29:43

You will be able to

  • Create a flex container with display: flex and control spacing between items using gap
  • Set the main and cross axes with flex-direction and predict how justify-content and align-items behave in row and column layouts
  • Align flex items as a group or individually using justify-content, align-items, align-self, and align-content
  • Size flex items with flex-grow, flex-shrink, flex-basis, and the flex shorthand, and explain how padding affects the result
  • Wrap items onto multiple lines with flex-wrap and inspect flex containers and items in browser developer tools

Good to know first

  • Basic HTML structure, including parent and child elements and classes
  • Basic CSS selectors, properties, and values
  • Familiarity with the CSS box model (content, padding, border)
  • Ability to open browser developer tools and edit styles in VS Code

Syllabus

10 lessons and a final project

  1. 1

    Setting up the flex parent and child markup

    0:00–1:051 min of video

    You will write the HTML skeleton that flexbox needs: one parent container holding several direct child elements. This markup is the starting point for every flexbox layout that follows.

    1 code5 build steps2 exercises3 questions
  2. 2

    Turning on flex with display, gap, and spacing

    1:05–3:002 min of video

    You learn how setting display: flex on a parent turns its children into a flex row, and how the gap property adds space between them. You also see that flex properties go on the parent (container) while some go on the children.

    1 code4 build steps3 exercises3 questions
  3. 3

    Main axis and flex-direction options

    3:00–5:002 min of video

    You will learn that a flex container lays its children out along a main axis, which runs horizontally by default, and that the cross axis runs perpendicular to it. You will also learn how the flex-direction property (row, row-reverse, column, column-reverse) changes the direction of the main axis.

    4 code5 build steps3 exercises4 questions
  4. 4

    Handling overflow with flex-wrap

    5:00–6:011 min of video

    You will learn why flex children can overflow a flex parent and horizontal scrolling appears. You will fix it with the flex-wrap property, which lets children move onto new rows.

    1 code3 build steps2 exercises3 questions
  5. 5

    Inspecting a flex layout and row and column gap

    6:01–8:202 min of video

    You will learn how to use the browser's Flexbox inspector to see a flex container, its direction, wrapping and items. You will also learn that the gap property is a shorthand for row-gap and column-gap.

    1 code5 build steps2 exercises3 questions
  6. 6

    Distributing space with justify-content

    8:20–11:443 min of video

    You will learn how justify-content moves flex child items along the main (horizontal) axis of a flex container. You will see the values flex-start, flex-end, center, space-between, space-around and space-evenly applied to wrapped rows.

    1 code6 build steps2 exercises3 questions
  7. 7

    Aligning on the cross axis and flipping to columns

    11:44–17:256 min of video

    You learn how align-items and align-self position flex children along the cross axis, how align-content aligns the rows as a group, and how switching flex-direction to column swaps what justify-content and align-items control.

    1 code5 build steps1 exercise3 questions
  8. 8

    Controlling item size with flex-basis, grow, and shrink

    17:25–22:435 min of video

    Flex child items can be sized with three properties: flex-basis (the starting size), flex-grow (how much an item grows to fill spare space) and flex-shrink (how much it shrinks to fit). You will see how each one changes the layout and how to use the browser inspector to check them.

    3 code3 build steps2 exercises3 questions
  9. 9

    The flex shorthand and box model sizing

    22:43–26:404 min of video

    The flex shorthand sets flex-grow, flex-shrink and flex-basis in one property, and a single number goes to flex-grow. Flex growing only changes the content box, so padding and border are added on top of the size flexbox calculates.

    1 code4 build steps2 exercises3 questions
  10. 10

    Wrapping sized items, comparing flexbox to grid, and changing order

    26:40–29:433 min of video

    You will see how flex-wrap lets flex items spill onto new lines and how flex: 1 and flex: 2 make items grow to fill space. You will also learn when to pick flexbox over grid and how the order property rearranges items.

    1 code5 build steps2 exercises3 questions

Final project

Build a responsive flexbox landing page

Build a one-page layout (a header navigation, a row of feature cards and a footer) using only flexbox, no grid. This ties together the container, direction, wrapping, alignment, sizing and order skills from the course, and you check it with the browser's flex inspector.

Free preview · Lesson 1 in full

Setting up the flex parent and child markup

You will write the HTML skeleton that flexbox needs: one parent container holding several direct child elements. This markup is the starting point for every flexbox layout that follows.

0:00 to 1:05 in the video

Scratchpad

Draw and write next to the video.

The idea

Flexbox is a CSS feature that lets you size and align a group of elements. To use it you need two things in your HTML: a parent element, called the flex container, and direct child elements inside it, called flex items. The CSS will later be attached to the parent, but first the structure has to exist.

In the video, the body of index.html is empty. The first step is to add a div with the class flex-parent. Inside it goes another div with the class flex-child and the text flex child. The children must be direct children of the parent, one level down, not nested deeper.

Next, the child is duplicated a few times and numbered (flex child 1, flex child 2, flex child 3, flex child 4) so you can tell the boxes apart when you later change their layout. Right now, with no CSS, the children simply stack vertically, one under another, because ordinary block elements (divs) stack by default.

Keep the class names simple and lowercase with hyphens, as in flex-parent and flex-child. The CSS for the layout will go in style.css, which is already open next to index.html in the editor. Viewing the page in the browser on the right shows the four stacked boxes, which is your baseline before flexbox is switched on.

Key points

  • Flexbox needs a parent (the flex container) and direct child elements (the flex items). 0:03
  • The parent is a div with the class flex-parent. 0:35
  • Each child is a div with the class flex-child and some text. 0:41
  • Duplicate and number the children so you can tell them apart. 0:52
  • Without CSS the children stack vertically, one under another. 1:05

Code from the screen

index.htmlhtml
<body>

  <div class="flex-parent">

    <div class="flex-child">flex child 1</div>
    <div class="flex-child">flex child 2</div>
    <div class="flex-child">flex child 3</div>
    <div class="flex-child">flex child 4</div>

  </div>

</body>

Save as index.html next to a style.css file and open it in a web browser.

Build along in the practice terminal

  1. Open index.html in VS Code and place the cursor between <body> and </body>.
  2. Type a div with the class flex-parent: <div class="flex-parent"></div>, then put it inside the body.
  3. Inside the flex-parent, add a div with the class flex-child and the text flex child.
  4. Duplicate the flex-child line three times and change the text to flex child 2, 3 and 4.
  5. Save and open the page. You should see four boxes stacked vertically, one under another.

Practice

Do it Solution checked

Build the markup on your own: a flex-parent div containing three flex-child divs with the text Box A, Box B and Box C. Open it in the browser and check that the boxes stack vertically.

Solution
  1. Type <div class="flex-parent"> inside the body.
  2. Inside it, type three divs with the class flex-child and the text Box A, Box B and Box C.
  3. Close the flex-parent with </div>.
  4. Save and open the page. Three boxes should be stacked vertically.

Three stacked boxes labelled Box A, Box B and Box C inside a flex-parent div.

Explain Solution checked

In your own words, explain why the flex items must be direct children of the flex container.

Solution
  1. Flexbox arranges the direct children of the container; the parent's flex settings only affect its immediate children, so the items must sit one level below the parent.

Flexbox lays out only the direct children of the flex container, so the items must be immediate children of the parent, not deeper nested elements.

On your scratchpad

Sketch a large rectangle labelled flex-parent with four small boxes labelled flex child 1 to 4 stacked inside it, one under another.

Quiz

  1. What is the flex container in this markup?

    1. The flex-child div
    2. The flex-parent div
    3. The body element
    4. The style.css file
    Show the answer

    B. The flex-parent div · The flex-parent div is the container; its direct children are the flex items.

    0:41 watch the moment

  2. What must the flex items be in relation to the parent?

    1. Nested several levels deep
    2. Direct children of the parent
    3. Placed in a separate file
    4. Images only
    Show the answer

    B. Direct children of the parent · The video stresses that the children are direct child elements of the flex container.

    0:12 watch the moment

  3. How do the four flex-child divs look before any flexbox CSS is added?

    1. Side by side in a row
    2. Stacked vertically, one under another
    3. Hidden
    4. Centred in the page
    Show the answer

    B. Stacked vertically, one under another · Divs are block elements by default, so they stack vertically.

    1:05 watch the moment

Open lesson 1, with the video →

Made by Beyond from the video “CSS Flexbox for beginners (mini course)” by Coder Coder. The video plays in YouTube's own player. Watch it on YouTube · All lessons