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

← Previous Next →

🔹 What are Flex Items?

Flex Items are the direct children of a flex container. When an element is declared as display: flex, all its immediate child elements become flex items, which can then be controlled using various Flexbox properties to adjust their size, position, and alignment inside the container.

🔸 Common Flex Item Properties

Property Description
order Controls the order in which items appear
flex-grow Defines how much an item will grow relative to others
flex-shrink Defines how much an item will shrink relative to others
flex-basis Sets the initial main size of the item before space is distributed
flex Shorthand for flex-grow, flex-shrink, and flex-basis
align-self Allows individual alignment overriding align-items from the container

🔸 Basic Flex Item Example

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
}
.item {
  flex: 1;
}

This divides all items equally within the container.

🔸 Using order to Rearrange Items

.item:nth-child(3) {
  order: -1;
}

This moves the third item to the beginning.

🔸 Using flex-grow, flex-shrink, flex-basis

.item1 {
  flex-grow: 2;
}
.item2 {
  flex-grow: 1;
}

Item 1 will take twice the space of item 2.

.item3 {
  flex: 1 0 200px; /* grow, shrink, basis */
}

🔸 Using align-self

.item {
  align-self: flex-end;
}

This overrides the vertical alignment for just this item.

Practice Questions

✅ Write CSS for the following:

Q1. Make all flex items take equal space.

Q2. Make one item grow twice as much as others.

Q3. Shrink one item faster than others on small screens.

Q4. Set a fixed initial width using flex-basis.

Q5. Use shorthand flex: 1 0 100px.

Q6. Change the order of one item to come first.

Q7. Align one item to the top while others remain centered.

Q8. Prevent one item from shrinking.

Q9. Make the first item grow and the last shrink.

Q10. Remove alignment from one item using align-self: auto.

Flex Items Quiz

Q1: What makes a child element a flex item?

A. display: block;
B. Its parent has display: flex;
C. It has flex: 1;
D. It is wrapped in a grid

Q2: Which property changes the order of a flex item?

A. sequence
B. order
C. position
D. index

Q3: What does flex-grow: 2; mean?

A. Shrinks the item
B. Item grows twice as fast as those with flex-grow: 1
C. Item is static
D. Item is hidden

Q4: What does flex: 1; shorthand represent?

A. flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
B. width: 100%
C. flex-basis: auto
D. flex-grow: 1; flex-shrink: 0; flex-basis: auto;

Q5: Which property prevents an item from shrinking?

A. flex-grow: 0;
B. flex-shrink: 0;
C. shrink: none;
D. flex-resize: disable;

Q6: What does flex-basis control?

A. Order of items
B. Initial size of the item before space is distributed
C. Border width
D. Margin spacing

Q7: Which property aligns a specific item differently from others?

A. align-self
B. align-items
C. justify-content
D. align-specific

Q8: What is the default value of order?

A. 1
B. 0
C. -1
D. auto

Q9: What happens when multiple items have different flex-grow values?

A. They grow proportionally to their values
B. Only the largest grows
C. Others are hidden
D. Layout breaks

Q10: Which value of align-self stretches the item to full height?

A. stretch
B. baseline
C. center
D. top
← Previous Next →
Login
Go Back Top