Everyone Can Learn Program
中文 Start learning
Core · FrontendLesson 4 of 8Free to read

Layout: boxes, flexbox, phones · Frontend: HTML, CSS and JavaScript

How do boxes end up side by side, and still fit on a phone?

Course contents

Why you need it

Layout is where most CSS time goes. Two ideas cover most of it: every element is a box with a size you can calculate, and flexbox arranges boxes in a row or column. Add one media query and the same page works on a phone.

The intuition

The box model. Every element is a box made of layers, from the inside out: content, padding (space inside the border), border, margin (space outside).

By default width sets only the content. With width: 200px; padding: 16px; border: 2px solid the box on screen is 200 + 16 + 16 + 2 + 2 = 236px. Add box-sizing: border-box and width includes padding and border, so the box is exactly 200px. Most sites set it on everything.

Flexbox. Put display: flex on the parent, and its children line up in a row:

.toolbar { display: flex; gap: 12px; justify-content: space-between; align-items: center; }
  • gap: space between the children
  • justify-content: spacing along the row
  • align-items: alignment across it
  • flex-direction: column: stack them instead

Media queries. Rules inside @media (max-width: 600px) { … } apply only on screens 600px wide or narrower, so you can stack a row on phones.

display: grid is the two-dimensional cousin of flex, for rows and columns at once.

Definition

Box model

Content, padding, border and margin, from the inside out. With content-box sizing, width covers the content only.

Flexbox

display: flex on a parent lays its children out in a row (or a column), with gap, justify-content and align-items controlling the space.

Media query

@media (max-width: 600px) { … }: rules that apply only when the screen matches the condition.

Examples

How wide is it really?

Run it in the lesson

The same width, two different boxes.

<style>
  .a { width: 200px; padding: 16px; border: 2px solid black; }
  .b { width: 200px; padding: 16px; border: 2px solid black; box-sizing: border-box; }
</style>
<div class="a">content-box</div>
<div class="b">border-box</div>
Step by step
  1. L2Content 200 + padding 16 × 2 + border 2 × 2 = 236px on screen.
  2. L3border-box: the padding and border fit inside the 200px, so the box is 200px.

A row of cards

Run it in the lesson

display: flex on the parent puts the cards side by side.

   <style>
     .cards { display: flex; gap: 16px; }
     .card { flex: 1; padding: 12px; border: 1px solid #ccc; }
   </style>

<div class="cards">
  <div class="card">One</div>
  <div class="card">Two</div>
  <div class="card">Three</div>
</div>
Step by step
  1. L2The parent becomes a flex container; gap puts 16px between children.
  2. L3flex: 1 shares the free space equally between the cards.

Stack on phones

Run it in the lesson

One media query switches the row to a column on narrow screens.

   <style>
     .cards { display: flex; gap: 16px; }
     @media (max-width: 600px) {
       .cards { flex-direction: column; }
     }
   </style>

<div class="cards">
  <div class="card">One</div>
  <div class="card">Two</div>
  <div class="card">Three</div>
</div>
Step by step
  1. L3Only on screens up to 600px wide…
  2. L4…the cards stack. Make the preview narrow to see it.

Common mistakes

Forgetting padding in the width

A 100% wide box with padding overflows its parent. Set box-sizing: border-box (most projects do it for every element).

display: flex on the children

flex arranges an element's children. To put cards in a row, set it on their container.

Fixed pixel widths everywhere

A 900px wide box can't fit a 390px phone. Let flex share the space, and use media queries for small screens.

Quick quiz

1. `width: 100px; padding: 10px; border: 1px solid` with the default box-sizing. How wide is the box on screen?

  1. A122px
  2. B100px
  3. C120px
Show the answer

Answer: A

100 + 10 + 10 + 1 + 1 = 122.

2. To lay out three buttons in a row, where does `display: flex` go?

  1. AOn the element that contains the buttons
  2. BOn each button
  3. COn the body only
Show the answer

Answer: A

flex lays out the children of the element it's set on.

Practice

3 exercises in three steps: predict what a program prints, change a program to meet a new requirement, then write one from scratch. Your code runs in the browser and is checked the moment you submit.

  1. PredictMeasure the card

    How wide is the card on screen?

  2. ModifyPut the cards in a row

    The three cards should sit side by side with 16px between them, but they're stacked. Fix the CSS.

  3. WriteSidebar layout

    Write the CSS for this page:

    • .layout puts the sidebar and the main area side by side
    • .sidebar is exactly 240px wide on screen, including its 16px padding
    • on screens up to 600px wide, .layout stacks them in a column

Practise this lesson

Open the interactive lesson to edit and run these examples and solve the exercises with instant feedback. Free to start, no sign-up.

Open the interactive lesson Course map

Interactive lessons open in order. If you have not done the earlier ones yet, you start at the course map.

Terms in this lesson

TermChineseDefinition
Box model盒模型Content, padding, border and margin around every element.
Flexbox弹性布局A layout mode that arranges children in a row or column.
Media query媒体查询CSS that applies only when the screen matches a condition, such as max-width.
Responsive design响应式设计One page that adapts to any screen size.