Responsive Layout Using CSS Flex

CSS Flexbox provides an easy way to create responsive and dynamic designs that adapt to various screen sizes and devices.

The responsive layout allows the webpage to reshape and resize based on the size of the screen it's viewed on. This ensures a consistent user experience.

Flexbox is ideal for responsive layouts due to its automatic container resizing, flexible item sizing, and easy alignment control.


Column Layouts Using CSS Flex

Column layout refers to the arrangement of content on a webpage in multiple columns. This allows us to organize and present information in a structured and visually appealing manner.

There are several common column layout configurations: 3-column, 2-column, and 1-column layouts.

Let's see how CSS flex can be used to achieve different column layouts.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Column Layout</title>
    </head>

    <body>
        <header>HEADER</header>
        <main>
            <div class="column column1">COLUMN 1</div>
            <div class="column column2">COLUMN 2</div>
            <div class="column column3">COLUMN 3</div>
        </main>
        <footer>FOOTER</footer>
    </body>

</html>
/* making a three column layout */
main {
    display: flex;
    flex-wrap: wrap;
    height: 100px;
    text-align: center;
}

.column1 {
    /* width takes 20% of the flex container */
    width: 20%;
    background-color: orange;
}

.column2 {
    /* width takes 60% of the flex container */
    width: 60%;
    background-color: yellow;
}

.column3 {
    /* width takes 20% of the flex container */
    width: 20%;
    background-color: greenyellow;
}

header,
footer {
    background-color: pink;
    text-align: center;
}

Browser Output

CSS Responsive Three Column Layout

In the above example, we used the flex property to create three column layouts. This type of layout is generally used for desktops and laptops to arrange different types of content in different columns.

For example, a three-column layout might be used in a news website to display headlines in one column, featured articles in another, and advertisements in the third.

Now, using flex properties and media queries, we can change the above three-column layout to a two-column layout.

@media screen and (max-width: 768px) {
/* set column1 and column2 to 50% width each */
    .column1,
    .column2 {
        width: 50%;
    }

/* set column3 to 100% width */
    .column3 {
        width: 100%;
    }
}

Browser Output

CSS Responsive Two Column Layout

The above CSS styles change the three-column layout to a two-column layout for tablets and smaller devices.

Note: CSS @media query is a CSS rule that allows you to apply different CSS styles to a web page depending on the device or screen size it is being viewed.

Finally, for mobile devices with smaller widths, we can set the following styles to achieve a single-column layout.

@media screen and (max-width: 450px) {
    .column1,
    .column2,
    .column3 {
        width: 100%;
    }
}

Browser Output

CSS Responsive Single Column Layout

In this way, the flex property can be used together with media queries to achieve multiple column layouts depending on the screen sizes.


The flex property can be used to create a responsive image gallery that adapts to different screen sizes.

We can use three-column layouts for desktop and laptop displays, a two-column layout for tablets, and finally, a single-column layout for mobile devices.

Let's look at an example.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Flex Gallery</title>
    </head>

    <body>
        <div class="gallery">
            <img
                src="https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg"
                alt="Northern Winter Sky Image"
            />
            <img
                src="https://images.pexels.com/photos/1142950/pexels-photo-1142950.jpeg"
                alt="Shining Stars Image"
            />
            <img
                src="https://images.pexels.com/photos/3933881/pexels-photo-3933881.jpeg"
                alt="A River Flowing Image"
            />
            <img
                src="https://images.pexels.com/photos/5409751/pexels-photo-5409751.jpeg"
                alt="A cloudy Mountain Image"
            />
            <img
                src="https://images.pexels.com/photos/4101555/pexels-photo-4101555.jpeg"
                alt="A Winter Rainbow Image"
            />
            <img
                src="https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg"
                alt="A Clean Mountain Lake"
            />
        </div>
    </body>

</html>
/* flex container */
div.gallery {
    display: flex;
    flex-wrap: wrap;
    Border: 1px solid black;
}

/* flex items */
img {
    width: 33%;
    height: 180px;
    margin: 2px;
}

Browser Output

Northern Winter Sky Image
Shining Stars Image
A River Flowing Image
A cloudy Mountain Image
A Winter Rainbow Image
A Clean Mountain Lake

In the above example, each image (flex item) has a width of 33% of the entire gallery (flex container). The images wrap into multiple lines due to the flex-wrap property.

For tablet devices, we can change the three-column layout above into a two-column layout.

@media screen and (max-width: 768px) {
    img {
        width: 49%;
        height: 250px;
	  margin: 16px;
    }
}

This will cause the individual flex items to occupy 49% of the container's width for devices with a maximum width of 768px.

Browser Output

Northern Winter Sky Image
Shining Stars Image
A River Flowing Image
A cloudy Mountain Image
A Winter Rainbow Image
A Clean Mountain Lake

Finally, for mobile devices, we can adjust the flex item's width to span 100% of the container.

@media screen and (max-width: 480px) {
    img {
        width: 100%;
        height: 400px;
    }
}

Browser Output

Northern Winter Sky Image
Shining Stars Image
A River Flowing Image
A cloudy Mountain Image
A Winter Rainbow Image
A Clean Mountain Lake

In this way, CSS flex layout allows containers and items to be flexible. This means that the items can be resized and repositioned to fit the available space.

This is the essence of flex-based layouts.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges