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

← Previous Next →

🔹 What is a Flex Container?

A Flex Container is the parent element in a flexbox layout that holds flex items. By setting display: flex or display: inline-flex on an element, it becomes a flex container, and its direct children automatically become flex items.

The flex container controls the flow, direction, alignment, spacing, and wrapping of the items inside it.

🔸 Declaring a Flex Container

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

🔸 Main Properties of Flex Container

Property Description
display Defines flex behavior: flex or inline-flex
flex-direction Sets the direction of items (row, column, etc.)
flex-wrap Controls whether items wrap or stay in one line
flex-flow Shorthand for flex-direction and flex-wrap
justify-content Aligns items horizontally within the container
align-items Aligns items vertically within the container
align-content Aligns multi-line rows (used with wrapping)

🔸 Example: Flex Container with Centered Items

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #f2f2f2;
}

🔸 Example: Horizontal and Vertical Layouts

/* Horizontal */
.container {
  display: flex;
  flex-direction: row;
}

/* Vertical */
.container {
  display: flex;
  flex-direction: column;
}

🔸 Flex Container with Wrapping

.container {
  display: flex;
  flex-wrap: wrap;
}

Practice Questions

✅ Write CSS for the following:

Q1. Create a flex container with horizontal layout.

Q2. Create a flex container with vertical layout.

Q3. Make a container that allows its items to wrap.

Q4. Center items in the middle of the container.

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

Q6. Space items equally using justify-content.

Q7. Reverse the order of items.

Q8. Create a container using inline-flex.

Q9. Set different wrap and direction using flex-flow.

Q10. Add spacing between rows using align-content.

Flex Container Quiz

Q1: What CSS property makes an element a flex container?

A. flex-type
B. display: flex;
C. layout: flex;
D. flex-wrap: container;

Q2: Which direction is default in a flex container?

A. row
B. column
C. row-reverse
D. horizontal

Q3: Which property wraps flex items onto multiple lines?

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

Q4: What does justify-content: space-between; do?

A. Distributes items with space between them
B. Aligns all items left
C. Adds margin to all items
D. Makes items float

Q5: Which shorthand combines direction and wrapping?

A. flex
B. align-flow
C. flex-flow
D. direction-wrap

Q6: Which property aligns items vertically in a single line?

A. justify-content
B. align-items
C. vertical-align
D. align-center

Q7: What value makes a flex container layout vertically?

A. row
B. column
C. block
D. stack

Q8: What does inline-flex do?

A. Makes items inline
B. Makes the container behave like inline but with flex layout
C. Makes all children inline-block
D. Enables grid layout

Q9: What does align-content affect?

A. Single-line alignment
B. Multi-line content alignment
C. Font alignment
D. Width adjustment

Q10: Which value reverses item direction in a flex container?

A. flex-start
B. reverse-row
C. row-reverse
D. direction: rtl;
← Previous Next →
Login
Go Back Top