• 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)

CSS Flexbox

← Previous Next →

🔹 What is Flexbox in CSS?

Flexbox, or the Flexible Box Layout, is a one-dimensional layout model in CSS that provides an efficient way to lay out, align, and distribute space among items in a container — even when their size is unknown or dynamic.

It is ideal for designing responsive layouts, navigation bars, card layouts, and more.

🔸 Key Concepts of Flexbox

  • Works in one dimension – row or column.

  • Uses a flex container and flex items.

  • Provides easy alignment (horizontal/vertical).

  • Automatically adjusts to different screen sizes.

🔸 Basic Syntax

HTML:
<div class="flex-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
CSS:
.flex-container {
  display: flex;
}

🔸 Main Properties (Flex Container)

Property Description
display: flex Enables flexbox on a container
flex-direction Row (default) or column
flex-wrap Allows wrapping of items
justify-content Aligns items horizontally
align-items Aligns items vertically
align-content Aligns rows when wrapped

🔸 Common Values of Flexbox Properties

flex-direction
flex-direction: row | row-reverse | column | column-reverse;
justify-content
justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;
align-items
align-items: stretch | flex-start | center | flex-end | baseline;

🔸 Example: Horizontal Centering

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 1px solid #000;
}

Practice Questions

✅ Write CSS for the following:

Q1. Create a flex container with three items in a row.

Q2. Center all items both horizontally and vertically.

Q3. Change direction to column.

Q4. Add space between items using justify-content.

Q5. Make items wrap to the next line using flex-wrap.

Q6. Align items to the bottom using align-items.

Q7. Reverse the order of items.

Q8. Create equal-width cards using flex: 1.

Q9. Combine flex-direction: column with vertical centering.

Q10. Make a responsive navigation bar using Flexbox.

CSS Flexbox Quiz

Q1: Which property enables Flexbox layout?

A. position: flex;
B. display: flex;
C. layout: flex;
D. flex: enable;

Q2: What is the default value of flex-direction?

A. row
B. column
C. center
D. horizontal

Q3: Which property allows items to wrap to the next line?

A. flex-wrap
B. wrap-items
C. align-wrap
D. flex-move

Q4: What does justify-content: center; do?

A. Aligns items vertically
B. Centers items horizontally
C. Makes items wrap
D. Shrinks all items

Q5: Which value of align-items aligns content to the bottom?

A. flex-end
B. flex-start
C. center
D. stretch

Q6: How do you space items equally with gaps in between?

A. justify-content: space-between;
B. justify-content: stretch;
C. align-content: around;
D. flex-gap: equal;

Q7: How do you reverse the direction of items in a row?

A. flex-direction: row-reverse;
B. justify-content: reverse;
C. align-direction: reverse;
D. direction: right-to-left;

Q8: What does align-items: center; do?

A. Horizontally aligns text
B. Vertically centers items
C. Justifies the content
D. Stretches all items

Q9: Which is a valid flex direction?

A. left-right
B. column-reverse
C. vertical
D. inline-row

Q10: Can Flexbox be combined with Media Queries for responsiveness?

A. No
B. Yes
C. Only with Grid
D. Only in mobile apps
← Previous Next →
Login
Go Back Top