• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

Flex Responsive Quiz

Q1: Which property makes flex items wrap to the next line?

A. flex-break
B. flex-wrap
C. wrap-content
D. align-wrap

Q2: Which Flexbox property is most useful for mobile responsiveness?

A. align-items
B. flex-wrap
C. z-index
D. float

Q3: What does flex: 1 1 200px; mean?

A. Grow 1, shrink 1, basis 200px
B. Width fixed at 200px
C. Shrink only
D. Align to center

Q4: What helps apply different flex styles on small screens?

A. display: inline;
B. @media queries
C. align-self
D. viewport-width

Q5: How to stack flex items vertically on mobile?

A. flex-order: column;
B. flex-direction: column; in media query
C. align-direction: stack;
D. position: column;

Q6: What does gap do in Flexbox?

A. Shrinks items
B. Adds space between items
C. Floats elements
D. Resizes container

Q7: What is a good flex-basis for equal-width cards?

A. flex: 1 1 250px;
B. width: 100%
C. basis: 0;
D. flex: auto;

Q8: Which layout will show horizontal on desktop and vertical on mobile?

A. Use flex-direction: row; and column in media query
B. Use grid-template: auto;
C. Set all items to block
D. Use float: left;

Q9: How to prevent items from shrinking?

A. flex-grow: 0;
B. flex-shrink: 0;
C. shrink: off;
D. max-width: 0;

Q10: Which property combines grow, shrink, and basis?

A. flex
B. align
C. wrap
D. display
← Previous Next →
Login
Go Back Top