• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

Flex Responsive

← Previous Next →

🔹 What is Responsive Flexbox?

Responsive Flexbox means using Flexbox properties in combination with media queries to make layouts adapt to different screen sizes — like mobile, tablet, and desktop.

Flexbox is naturally responsive because it automatically adjusts item sizes and spacing. You can use flex-wrap, flex-direction, gap, and media queries to build layouts that work beautifully on all devices.

🔸 Key Flexbox Features That Help Responsiveness

Property Description
flex-wrap Allows items to wrap on smaller screens
flex-direction Can switch from row to column on smaller screens
flex Allows dynamic resizing of items
gap Adds spacing between items without using margins
media queries Customize layout per screen size

🔸 Basic Responsive Flex Layout Example

HTML:
<div class="flex-container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>
CSS:
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.box {
  flex: 1 1 200px;
  background: #eee;
  padding: 20px;
  text-align: center;
}

This layout will automatically wrap boxes when screen width is limited.

🔸 Adding Media Queries for Better Control

@media (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
}

This changes the layout from row to column on smaller screens.

🔸 Example: Responsive Navbar with Flexbox

<nav class="navbar">
  <div class="logo">Logo</div>
  <div class="links">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px;
}
.links a {
  margin-left: 15px;
}
@media (max-width: 500px) {
  .navbar {
    flex-direction: column;
    align-items: center;
  }
  .links a {
    margin: 5px;
  }
}

Practice Questions

✅ Write CSS for the following:

Q1. Create a flex container that wraps items on small screens.

Q2. Build a 3-column layout that becomes single-column on mobile.

Q3. Make flex items fill the width equally.

Q4. Add a gap between flex items.

Q5. Center items horizontally and vertically on all screens.

Q6. Change layout from row to column below 768px.

Q7. Make a responsive button group with Flexbox.

Q8. Adjust item sizes using flex-basis and flex-grow.

Q9. Create a sidebar that becomes top-bar on small screens.

Q10. Create a flex image gallery that stacks images on mobile.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top