CSS Responsive Flexbox

Responsive Flexbox

Media queries let a flexbox layout change shape across screen sizes and devices.

Take a design with three columns on large screens and one column on small screens. One approach switches flex-direction from row to column once a chosen breakpoint is reached.

The other approach keeps the direction and alters the percentage given to the flex property on each flex item. For that to work, the flex container also needs flex-wrap: wrap;.

Flex direction change

At a screen width of 600px or less, flex-direction goes from row to column.

Create a page with a three-column flexbox layout using flex-direction: row. Add a media query at max-width 600px that changes flex-direction to column, making it a one-column layout. Use three colored boxes with text.

> Output: complete HTML page

Prompt

Create a page with a three-column flexbox layout using flex-direction: row. Add a media query at max-width 600px that changes flex-direction to column, making it a one-column layout. Use three colored boxes with text.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox - Flex Direction</title>
<style>
.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-item {
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 30px;
  text-align: center;
  width: 100%;
}

/* Make a one column-layout instead of three-column layout */
@media (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<h1>Responsive Flexbox</h1>
<p>Resize the browser window to see the effect.</p>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

</body>
</html>

Flex percentage change

Once the screen is no wider than 600px, the flex property jumps from 33.3% to 100%.

Create a page with a flex container using flex-wrap: wrap. Each flex item has flex: 33.3% to make three columns. Add a media query at max-width 600px that changes each item to flex: 100% for a single-column layout.

> Output: complete HTML page

Prompt

Create a page with a flex container using flex-wrap: wrap. Each flex item has flex: 33.3% to make three columns. Add a media query at max-width 600px that changes each item to flex: 100% for a single-column layout.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox - Flex Percentage</title>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
  font-size: 30px;
  flex: 33.3%;
}

/* Make a one column-layout instead of a three-column layout */
@media (max-width: 600px) {
  .flex-item {
    flex: 100%;
  }
}
</style>
</head>
<body>

<h1>Responsive Flexbox</h1>
<p>Resize the browser window to see the effect.</p>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

</body>
</html>

Responsive Image Gallery using Flexbox

Combine flexbox with media queries and an image gallery can change its number of columns to suit the screen size.

Example

Create a responsive image gallery using flexbox and media queries. Show four images per row on large screens, two per row on medium screens (max-width 800px), and one per row on small screens (max-width 600px). Use placeholder images with descriptive text below each.

> Output: complete HTML page

Prompt

Create a responsive image gallery using flexbox and media queries. Show four images per row on large screens, two per row on medium screens (max-width 800px), and one per row on small screens (max-width 600px). Use placeholder images with descriptive text below each.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.gallery-item {
  flex: 25%;
  max-width: 25%;
  padding: 4px;
}

.gallery-item img {
  width: 100%;
  vertical-align: middle;
}

.gallery-item .desc {
  padding: 10px;
  text-align: center;
  background-color: #f1f1f1;
  font-size: 14px;
}

@media (max-width: 800px) {
  .gallery-item {
    flex: 50%;
    max-width: 50%;
  }
}

@media (max-width: 600px) {
  .gallery-item {
    flex: 100%;
    max-width: 100%;
  }
}
</style>
</head>
<body>

<h1>Responsive Image Gallery</h1>
<p>Resize the browser window to see the responsive effect.</p>

<div class="gallery">
  <div class="gallery-item">
    <img src="img_5terre.jpg" alt="Cinque Terre">
    <div class="desc">Cinque Terre</div>
  </div>
  <div class="gallery-item">
    <img src="img_forest.jpg" alt="Forest">
    <div class="desc">Forest</div>
  </div>
  <div class="gallery-item">
    <img src="img_lights.jpg" alt="Northern Lights">
    <div class="desc">Northern Lights</div>
  </div>
  <div class="gallery-item">
    <img src="img_mountains.jpg" alt="Mountains">
    <div class="desc">Mountains</div>
  </div>
</div>

</body>
</html>

Responsive Website using Flexbox

A whole responsive website layout is also possible with flexbox, with both the navigation bar and the content area staying flexible.

Example

Create a responsive website layout using flexbox. Include a top navigation bar with links, a main content area with a sidebar, and a footer. Use media queries to stack the navigation links vertically and place the sidebar below the content on screens smaller than 600px.

> Output: complete HTML page

Prompt

Create a responsive website layout using flexbox. Include a top navigation bar with links, a main content area with a sidebar, and a footer. Use media queries to stack the navigation links vertically and place the sidebar below the content on screens smaller than 600px.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website using Flexbox</title>
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
}

.header {
  background-color: #333;
  color: white;
  padding: 15px;
  text-align: center;
}

.navbar {
  display: flex;
  background-color: #555;
}

.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

.navbar a:hover {
  background-color: #000;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

.footer {
  padding: 20px;
  text-align: center;
  background-color: #ddd;
}

@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
  }
  .row {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>My Website</h1>
  <p>A flexible layout using CSS Flexbox.</p>
</div>

<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<div class="row">
  <div class="main">
    <h2>Main Content</h2>
    <p>Some text about something important.</p>
    <p>Some other text about something else.</p>
  </div>
  <div class="side">
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <p>Some text about me in culpa qui officia deserunt mollit anim.</p>
  </div>
</div>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>