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 */