Prev Next

CSS Flex Responsive

Flexbox enables responsive designs that adapt seamlessly to different screen sizes. By using media queries and flex properties like flex-wrap, justify-content, and align-items, you can create layouts that look great on all devices.

Key Topics

Using Flex-Wrap for Responsiveness

The flex-wrap property allows flex items to wrap onto multiple lines when there is insufficient space, making the layout more flexible and responsive.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Flex-Wrap Example</title>
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            background-color: #F0F0F0;
            padding: 10px;
        }
        .flex-item {
            background-color: #007BFF;
            color: white;
            padding: 20px;
            margin: 5px;
            width: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <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 class="flex-item">Item 5</div>
    </div>
</body>
</html>

Explanation: The flex items wrap to the next line when the container's width is insufficient, ensuring the layout adapts to different screen sizes.

Responsive Layout with Media Queries

Media queries allow you to adjust flexbox layouts for specific screen sizes, ensuring a tailored user experience on all devices.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Flexbox with Media Queries</title>
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            background-color: #F0F0F0;
            padding: 10px;
        }
        .flex-item {
            background-color: #007BFF;
            color: white;
            padding: 20px;
            margin: 5px;
            flex: 1 1 45%;
            text-align: center;
        }
        @media (max-width: 600px) {
            .flex-item {
                flex: 1 1 100%;
            }
        }
    </style>
</head>
<body>
    <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>

Explanation: The layout adjusts to two items per row on larger screens and one item per row on smaller screens (under 600px).

Key Takeaways

  • Flex Wrap: Use flex-wrap to allow items to wrap onto new lines when necessary.
  • Responsive Design: Combine flexbox properties with media queries to create adaptable layouts for all screen sizes.
  • Efficiency: Flexbox minimizes the need for complex grid systems when designing responsive layouts.
Prev Next