• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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.

← 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