Flexbox item properties help you control the behavior of individual items inside a flex container. Two key properties are:

• flex: A shorthand property used to set how an item grows, shrinks, or bases its size relative to its siblings.
• align-self: Overrides the container's align-items property for a specific item, allowing it to be aligned differently along the cross axis.

These properties give you fine-grained control over the layout of flex items.

Syntax

Follow the code block below to set item properties in a flex item:

/* The flex property shorthand */
flex: flex-grow flex-shrink flex-basis;
/* Example: flex: 1 1 auto; */

/* Align an individual item on the cross axis */
align-self: auto | flex-start | flex-end | center | baseline | stretch;

Explanation:

• flex:
  • flex-grow: Determines how much an item will grow relative to the rest.
  • flex-shrink: Determines how much an item will shrink relative to the rest.
  • flex-basis: Sets the initial size of the item before extra space is distributed.
• align-self:
  • Overrides the container’s align-items for the selected item.
  • Accepts values such as flex-start, flex-end, center, baseline, or stretch.

Example 1: Using the Flex Property to Control Item Sizing

In this example, we have three flex items inside a container. We use the flex property on each item so that they grow equally to fill the available space.

Explanation:

• Flex Container:
  • Defined with display: flex;, allowing its child items to use flex properties.
• Flex Item Properties:
  • Each item uses flex: 1 1 auto; so that they expand or contract evenly to share the container space.
• Outcome:
  • The items adjust their widths equally based on the available space, making the layout responsive.

Example 2: Using align-self for Individual Item Alignment

In this example, we use align-self to position an individual flex item differently from the others within the same container.

Explanation:

• Container Alignment:
  • The container aligns items vertically to the center (cross axis) by default via align-items: center;.
• Default Items:
  • Most items inherit this center alignment.
• Special Item:
  • The second item, with the class .item-special, uses align-self: flex-start; so it aligns at the top (start of the cross axis) instead of the center.
• Outcome:
  • The special item appears at the top of the container while the other items remain centered, demonstrating the flexibility to override container alignment for individual items.

This lesson shows how to use the flex and align-self properties to control individual flex items. These item properties enable you to fine-tune the behavior and alignment of your elements within a flex container, allowing for highly customizable and responsive layouts.