---
title: CSS Flex Responsive
description: "> ## Responsive Flexbox > > > > You learned from the [CSS Media Queries](https://apprentice.mn/docs/css-media-queries/) chapter that you can use media queries to create different layouts for different screen sizes and devices. For example, if you want to create a two-column layout…"
url: "https://apprentice.mn/docs/css-flex-responsive/"
updated: "2021-05-13"
category: CSS
---

# CSS Flex Responsive

> ## Responsive Flexbox
>
>
>
> You learned from the [CSS Media Queries](https://apprentice.mn/docs/css-media-queries/) chapter that you can use media queries to create different layouts for different screen sizes and devices.

For example, if you want to create a two-column layout for most screen sizes, and a one-column layout for small screen sizes (such as phones and tablets), you can change the `flex-direction` from `row` to `column` at a specific breakpoint (800px in the example below):

### Example

      `.flex-container {
  display: flex;
  flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}`

Another way is to change the percentage of the `flex` property of the flex items to create different layouts for different screen sizes. Note that we also have to include `flex-wrap: wrap;` on the flex container for this example to work:

### Example

      `.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item-left {
  flex: 50%;
}

.flex-item-right {
  flex: 50%;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}`

## Responsive Image Gallery using Flexbox

Use flexbox to create a responsive image gallery that varies between four, two or full-width images, depending on screen size:

          ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/27.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/26.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/28.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/29.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/30.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/1.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/2.jpg)   ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/3.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/5.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/6.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/7.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/8.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/9.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/17.jpg)   ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/10.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/11.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/12.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/13.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/14.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/15.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/16.jpg)   ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/18.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/19.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/20.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/31.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/32.jpg) ![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/33.jpg)

## Responsive Website using Flexbox

Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content:

             Page Title

#### Resize the browser window to see the responsive effect.

# My Website

With a **flexible** layout.

    [Link](#) [Link](#) [Link](#) [Link](#)

## About Me

##### Photo of me:

 Image

Some text about me in culpa qui officia deserunt mollit anim..

### More Text

Lorem ipsum dolor sit ame.

 Image
 Image
 Image

## TITLE HEADING

##### Title description, Dec 7, 2017

 Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

## TITLE HEADING

##### Title description, Sep 2, 2017

 Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

## Footer

         [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flex-responsive%2F&linkname=CSS%20Flex%20Responsive](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flex-responsive%2F&linkname=CSS%20Flex%20Responsive)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flex-responsive%2F&linkname=CSS%20Flex%20Responsive](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flex-responsive%2F&linkname=CSS%20Flex%20Responsive)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flex-responsive%2F&linkname=CSS%20Flex%20Responsive](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flex-responsive%2F&linkname=CSS%20Flex%20Responsive)[https://www.addtoany.com/share](https://www.addtoany.com/share)