The Project | About Us | Contribute | Donations | License

HOME

In this section, we will delve into the properties that can be applied to flex items within a flex container. Understanding these properties will allow you to control the alignment, order, and sizing of individual flex items, providing you with powerful tools to create flexible and responsive layouts.

Key Flex Item Properties

order
flex-grow
flex-shrink
flex-basis
flex
align-self

`order`

The order property specifies the order in which the flex items appear within the flex container. By default, all flex items have an order value of 0. Items with a lower order value will appear before items with a higher order value.

.item1 {
  order: 2;
}

.item2 {
  order: 1;
}

.item3 {
  order: 3;
}

Explanation:

In the example above, .item2 will appear first, followed by .item1, and then .item3.

`flex-grow`

The flex-grow property defines the ability of a flex item to grow relative to the rest of the flex items. It accepts a unitless value that serves as a proportion. If all items have a flex-grow value of 1, they will grow equally. If one item has a value of 2, it will take up twice as much space as the others.

.item1 {
  flex-grow: 1;
}

.item2 {
  flex-grow: 2;
}

.item3 {
  flex-grow: 1;
}

Explanation:

In the example above, .item2 will grow to take up twice as much space as .item1 and .item3.

`flex-shrink`

The flex-shrink property specifies the ability of a flex item to shrink if necessary. It also accepts a unitless value. If all items have a flex-shrink value of 1, they will shrink equally when necessary. If one item has a value of 0, it will not shrink.

.item1 {
  flex-shrink: 1;
}

.item2 {
  flex-shrink: 0;
}

.item3 {
  flex-shrink: 1;
}

Explanation:

In the example above, .item2 will not shrink, while .item1 and .item3 will shrink equally if necessary.

`flex-basis`

The flex-basis property defines the initial main size of a flex item before any space distribution happens. It can be a length (e.g., 20%, 10rem, auto).

.item1 {
  flex-basis: 20%;
}

.item2 {
  flex-basis: 30%;
}

.item3 {
  flex-basis: auto;
}

Explanation:

In the example above, .item1 will initially take up 20% of the container's main size, .item2 will take up 30%, and .item3 will take up space based on its content size.

`flex`

The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis. It allows you to set all three properties at once.

.item1 {
  flex: 1 1 20%;
}

.item2 {
  flex: 2 1 30%;
}

.item3 {
  flex: 1 0 auto;
}

Explanation:

In the example above, .item1 will grow and shrink equally with an initial basis of 20%, .item2 will grow twice as much as .item1 and .item3 with an initial basis of 30%, and .item3 will not shrink with an initial basis based on its content size.

`align-self`

The align-self property allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. It accepts the same values as align-items: flex-start, flex-end, center, baseline, and stretch.

.item1 {
  align-self: flex-start;
}

.item2 {
  align-self: center;
}

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

Explanation:

In the example above, .item1 will align to the start of the cross axis, .item2 will align to the center, and .item3 will align to the end.

Practical Exercise

Task: Create a flex container with three items. Use the flex item properties to achieve the following layout:

The first item should appear last.
The second item should take up twice as much space as the others.
The third item should not shrink and should align to the center of the cross axis.

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      border: 1px solid #000;
    }
    .item1 {
      order: 3;
      flex: 1 1 20%;
    }
    .item2 {
      flex: 2 1 30%;
    }
    .item3 {
      flex: 1 0 auto;
      align-self: center;
    }
  </style>
  <title>Flex Item Properties</title>
</head>
<body>
  <div class="container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
    <div class="item3">Item 3</div>
  </div>
</body>
</html>

Explanation:

The .item1 is set to appear last with order: 3.
The .item2 is set to grow twice as much as the others with flex: 2 1 30%.
The .item3 is set to not shrink and align to the center of the cross axis with flex: 1 0 auto and align-self: center.

Conclusion

In this section, we covered the key properties that can be applied to flex items: order, flex-grow, flex-shrink, flex-basis, flex, and align-self. Understanding and using these properties will allow you to create more flexible and responsive layouts. In the next section, we will explore how to create layouts using Flexbox, building on the knowledge of flex container and flex item properties.

Flex Item Properties

Key Flex Item Properties

`order`

`flex-grow`

`flex-shrink`

`flex-basis`

`flex`

`align-self`

Practical Exercise

Conclusion

CSS Mastery: From Beginner to Advanced

Module 1: Introduction to CSS

Module 2: Text and Font Styling

Module 3: Box Model and Layout

Module 4: Positioning and Floating

Module 5: Flexbox

Module 6: CSS Grid

Module 7: Advanced CSS Techniques

Module 8: Responsive Design

Module 9: Preprocessors and Frameworks

Module 10: Best Practices and Optimization

Module 11: Project: Building a Responsive Website