How To Make a Website Responsive With Flexbox?
Last Updated :
28 Jun, 2025
Making a website responsive ensures that it looks good and functions well across different screen sizes, from desktop monitors to smartphones. One of the most powerful tools for achieving responsiveness in web design is Flexbox. Flexbox allows us to create flexible layouts that can adapt to various screen sizes and orientations.
Flexbox Fundamentals
Flexbox, or the Flexible Box Layout, is a CSS layout model designed to create complex layouts easily. To use Flexbox, we first define a container as a flex container by setting display: flex. By default, Flexbox arranges items in a row. We can change this direction with the flex-direction property. The justify-content property aligns flex items along the main axis. The align-items property aligns flex items along the cross-axis.
Example: This example shows the use of Flexbox.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Flexbox Fundamentals</title>
<style>
/* Flexbox Fundamentals */
.flex-container {
display: flex;
justify-content: space-around;
/* Evenly spaces out items */
padding: 20px;
background-color: #f1f1f1;
}
.flex-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
flex: 1;
/* Makes all items take equal space */
margin: 10px;
}
</style>
</head>
<body>
<!-- Basic Flexbox Container -->
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
Output:
OutputResponsive Layout Techniques
By default, flex items will try to fit into one line. The flex-basis property specifies the initial size of a flex item before it is adjusted by the flex-grow or flex-shrink properties. The flex-grow property defines how much an item should grow relative to other items if there is extra space. Responsive design often requires different alignments on various screen sizes. While Flexbox is great for linear layouts, the CSS Grid Layout is better for two-dimensional layouts.
Example: This example shows the responsive layout using Flexbox.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Responsive Layout Techniques</title>
<style>
/* Responsive Layout Techniques */
.flex-container {
display: flex;
flex-wrap: wrap;
/* Allows items to wrap to the next line */
padding: 20px;
background-color: #f1f1f1;
}
.flex-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
flex: 1 1 300px;
/* Flex-grow, flex-shrink, flex-basis */
margin: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- Responsive Flexbox Layout -->
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
</div>
</body>
</html>
Output:
OutputResponsive Navigation Bars
Flexbox simplifies the creation of navigation bars by aligning items horizontally or vertically and adjusting their spacing. Navigation bars can be designed to switch between horizontal and vertical layouts depending on screen. Using Flexbox, we can easily center navigation items within the bar. On smaller screens, navigation bars often turn into a hamburger menu or a dropdown. Flexbox makes it easy to align menu items at the start, end, or center of the navigation bar.
Example: This example shows the responsive navigation bar.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Responsive Navigation Bar</title>
<style>
/* Responsive Navigation Bar */
.nav-container {
display: flex;
background-color: #333;
padding: 10px;
}
.nav-item {
color: white;
padding: 14px 20px;
text-align: center;
text-decoration: none;
flex: 1;
/* Makes each nav item take equal space */
}
.nav-item:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<!-- Responsive Navigation Bar -->
<div class="nav-container">
<a href="#" class="nav-item">Home</a>
<a href="#" class="nav-item">About</a>
<a href="#" class="nav-item">Services</a>
<a href="#" class="nav-item">Contact</a>
</div>
</body>
</html>
Output:
OutputGrid Layouts with Flexbox
Flexbox can be used to create simple grid layouts where items are arranged in rows and columns. Flexbox ensures that columns in a grid layout have equal height, even if their content varies. Flexbox grids automatically adjust based on screen size. To center grid items within their container, Flexbox properties like justify-content and align-items can be used. While Flexbox is useful for simple grids and layouts, CSS Grid is more suitable for complex grid structures.
Example: This example shows the use of flexbox for creating the Grid Layout.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Grid Layouts with Flexbox</title>
<style>
/* Grid Layouts with Flexbox */
.grid-container {
display: flex;
flex-wrap: wrap;
/* Wrap items to next line */
padding: 20px;
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
margin: 10px;
flex: 1 1 calc(33.333% - 20px);
/* 3 items per row with spacing */
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- Flexbox Grid Layout -->
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>
Output:
OutputMedia queries are CSS techniques used to apply styles based on the device's characteristics, such as screen width, height, and resolution. They are essential for creating responsive designs that adapt to different devices. Media queries can be used to change Flexbox properties based on screen size. For example, we might switch from a horizontal layout to a vertical layout on smaller screens.
Example: This example shows the useof media Query with flexbox.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Media Queries with Flexbox</title>
<style>
/* Media Queries with Flexbox */
.flex-container {
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.flex-item {
background-color: #4CAF50;
color: white;
padding: 20px;
margin: 10px;
flex: 1 1 300px;
/* Default layout */
box-sizing: border-box;
}
/* Media Query for smaller screens */
@media (max-width: 600px) {
.flex-item {
flex: 1 1 100%;
/* Stacks items on top of each other */
}
}
</style>
</head>
<body>
<!-- Flexbox Layout with Media Queries -->
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
</div>
</body>
</html>
Output:
OutputFlexbox for Complex Layouts
Flexbox can be combined with other layout techniques, such as CSS Grid, to create complex and flexible layouts. This allows us to achieve more advanced designs while maintaining responsive behavior. We can nest flex containers within each other to create complex layouts. Each nested container can have its own flex properties, allowing for detailed control over the layout.
Example: This example shows the complex layout using flexbox.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Complex Layout with Flexbox</title>
<style>
/* Complex Layout with Flexbox */
.complex-container {
display: flex;
flex-wrap: wrap;
}
.sidebar {
background-color: #333;
color: white;
padding: 20px;
flex: 1 1 200px;
/* Sidebar width */
}
.content {
background-color: #4CAF50;
color: white;
padding: 20px;
flex: 2 1 400px;
/* Content area width */
}
</style>
</head>
<body>
<!-- Complex Layout with Sidebar and Content -->
<div class="complex-container">
<div class="sidebar">Sidebar</div>
<div class="content">Main Content Area</div>
</div>
</body>
</html>
Output:
OutputFlexbox can be used to ensure that images are responsive and adjust to different screen sizes. By setting max-width: 100% and height: auto, images will scale proportionally. In addition to images, Flexbox can be used to layout other media elements, such as videos. By applying flex properties, media elements can be aligned and scaled within their containers. Flexbox helps preserve the aspect ratio of images and media by adjusting their container sizes. This prevents images from stretching or distorting as the screen size changes.
Example: This example shows the creation of Responsive images and media using flexbox.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Responsive Images with Flexbox</title>
<style>
/* Responsive Images and Media */
.image-container {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.image-container img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
</style>
</head>
<body>
<!-- Responsive Image with Flexbox -->
<div class="image-container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240826125944/Flutter_Change_Icon.png"
alt="Placeholder Image">
</div>
</body>
</html>
Output:
OutputTesting and Debugging Responsive Designs
This is not about Flexbox as it is about testing our designs to make sure they work across different devices and screen sizes. We should always use browser developer tools to test your responsive designs. Each of above mentioned approaches uses flexbox to create responsive layouts that adapt to various screen sizes and devices.