Responsive Design & Flexbox

Duration: 30 min

Responsive design ensures websites look good on all devices—phones, tablets, and desktops. Flexbox is a powerful layout tool that makes responsive design easier. Together, they create flexible, mobile-first websites.

The Viewport Meta Tag

The viewport meta tag tells browsers how to render the page on different devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This ensures:

• Page width matches device width
• Initial zoom level is 100%
• Text is readable without zooming

Mobile-First Approach

Start with mobile styles, then add styles for larger screens:

/* Mobile styles (default) */
body {
  font-size: 14px;
  padding: 10px;
}

.container {
  width: 100%;
}

/* Tablet and up */
@media (min-width: 768px) {
  body {
    font-size: 16px;
    padding: 20px;
  }
  
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
    padding: 30px;
  }
  
  .container {
    width: 960px;
  }
}

Media Queries

Media queries apply styles based on device characteristics:

/* Screen width */
@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

/* Screen orientation */
@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

/* Device pixel ratio (for retina displays) */
@media (-webkit-min-device-pixel-ratio: 2) {
  .logo {
    background-image: url("logo@2x.png");
  }
}

/* Multiple conditions */
@media (min-width: 768px) and (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none;
  }
  
  body {
    color: black;
    background: white;
  }
}

Flexbox Layout

Flexbox creates flexible, one-dimensional layouts:

.flex-container {
  display: flex;
  
  /* Main axis alignment (horizontal by default) */
  justify-content: center;        /* center, flex-start, flex-end, space-between, space-around */
  
  /* Cross axis alignment (vertical by default) */
  align-items: center;            /* center, flex-start, flex-end, stretch */
  
  /* Direction */
  flex-direction: row;            /* row, column, row-reverse, column-reverse */
  
  /* Wrapping */
  flex-wrap: wrap;                /* wrap, nowrap, wrap-reverse */
  
  /* Gap between items */
  gap: 20px;
}

.flex-item {
  /* Grow factor */
  flex-grow: 1;
  
  /* Shrink factor */
  flex-shrink: 1;
  
  /* Base size */
  flex-basis: 200px;
  
  /* Shorthand */
  flex: 1 1 200px;
  
  /* Individual alignment */
  align-self: flex-end;
}

Responsive Flexbox Example

/* Mobile: stack vertically */
.card-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card {
  flex: 1;
  min-width: 100%;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
  .card-container {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .card {
    flex: 1 1 calc(50% - 7.5px);
    min-width: 300px;
  }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  .card {
    flex: 1 1 calc(33.333% - 10px);
    min-width: 300px;
  }
}

Responsive Images

Images that scale with the container:

/* Responsive image */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive background image */
.hero {
  background-image: url("small.jpg");
  background-size: cover;
  background-position: center;
  height: 300px;
}

@media (min-width: 768px) {
  .hero {
    background-image: url("large.jpg");
    height: 500px;
  }
}

Common Breakpoints

Standard breakpoints for responsive design:

/* Mobile: 320px - 767px */
@media (max-width: 767px) {
  /* Mobile styles */
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet styles */
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
  /* Desktop styles */
}

/* Large desktop: 1440px and up */
@media (min-width: 1440px) {
  /* Large desktop styles */
}

Flexbox vs Grid

Choose the right tool:

/* Flexbox: one-dimensional, flexible */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Grid: two-dimensional, structured */
.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  grid-template-rows: 60px 1fr 40px;
  gap: 20px;
}

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}