Skip to main content

Flex Item Properties

Flex Item Properties

Flex item properties control how individual flex items behave within a flex container. These properties allow you to define the size, order, and alignment of items within a flex layout. This section covers the various flex item properties, their values, and their effects.


order

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

.item-1 {
  order: 2;
}
.item-2 {
  order: 1;
}
.item-3 {
  order: 3;
}

In this example, .item-2 will appear first, followed by .item-1, and then .item-3.


flex-grow

The flex-grow property defines how much a flex item will grow relative to the other items in the flex container. It takes a unitless number that serves as a proportion:

.item {
  flex-grow: 1;
}

In this example, each item will grow to fill the available space equally. If one item has a flex-grow value of 2, it will grow twice as much as an item with a value of 1.

Common Values for flex-grow

Value Description
0 The item will not grow.
1 The item will grow proportionally to other items with a value of 1.
2 The item will grow twice as much as an item with a value of 1.

flex-shrink

The flex-shrink property defines how much a flex item will shrink relative to the other items in the flex container. It also takes a unitless number:

.item {
  flex-shrink: 1;
}

In this example, each item will shrink equally to fit within the container. If an item has a flex-shrink value of 2, it will shrink twice as much as an item with a value of 1.

Common Values for flex-shrink

Value Description
0 The item will not shrink.
1 The item will shrink proportionally to other items with a value of 1.
2 The item will shrink twice as much as an item with a value of 1.

flex-basis

The flex-basis property defines the initial size of a flex item before any space distribution occurs. It can be set to a specific value or left as auto:

.item {
  flex-basis: 200px;
}

In this example, each item will start with a base size of 200px. If flex-basis is set to auto, the size of the item will be based on its content.

Common Values for flex-basis

Value Description
auto The item’s size is based on its content.
100px The item’s size is fixed at 100px.
50% The item’s size is 50% of the flex container’s size.

flex

The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis. It allows you to define these properties in a single line:

.item {
  flex: 1 1 200px;
}

In this example, the flex item will grow and shrink as needed, starting with a base size of 200px.

Examples of flex Values

Value Description
1 Shorthand for flex: 1 1 0%. The item grows and shrinks equally, with a base size of 0.
2 1 100px The item grows twice as much as items with a value of 1, shrinks equally, and has a base size of 100px.
1 0 50% The item grows and shrinks equally, but will not shrink below a base size of 50% of the container’s size.

align-self

The align-self property allows you to override the align-items property for individual flex items. It can take the following values:

Value Description
auto Uses the value of the align-items property from the flex container (default).
flex-start Aligns the item at the start of the cross axis.
flex-end Aligns the item at the end of the cross axis.
center Centers the item along the cross axis.
baseline Aligns the item along its baseline.
stretch Stretches the item to fill the container (default).

Comparison of Flex Item Properties

Property Effect Default Value
order Determines the order of items within the flex container. 0
flex-grow Determines how much an item will grow relative to others. 0
flex-shrink Determines how much an item will shrink relative to others. 1
flex-basis Defines the initial size of an item. auto
flex Shorthand for flex-grow, flex-shrink, and flex-basis. 0 1 auto
align-self Overrides the align-items property for individual items. auto

Conclusion

Flex item properties provide detailed control over the size, order, and alignment of flex items within a flex container. By mastering these properties, you can create highly customizable and responsive layouts that meet your design needs.

Comments