Flex Item

A flex item is a child element of a parent container that has been set to display as a flex container using the display: flex property. Flex items are placed inside the flex container and are positioned according to the flex container’s alignment and justification rules.

Purpose

The purpose of the flex item is to allow for flexible and responsive layouts to be created. By using the display: flex property on a parent container, developers can create a flexible layout that adjusts to different screen sizes and devices. Flex items can be manipulated using various flexbox properties to control their size, position, and alignment within the flex container.

Usage

To use the flex item property, a parent container must first be set to display as a flex container using the display: flex property. The child elements of the flex container will then become flex items.

Example

In the following example, the display: flex property has been set on a parent container with three child elements:

.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

The child elements with class .item will become flex items and will be positioned within the parent container according to the flex container’s alignment and justification rules.

Flexbox Properties

Flex items can be manipulated using various flexbox properties to control their size, position, and alignment within the flex container. Some common flexbox properties include:

flex-grow

The flex-grow property specifies how much an item should grow to fill the available space. The value is a unitless number that represents the proportion of the available space the item should take up. For example, if an item has a flex-grow value of 1 and there are two items in the container, that item will take up half of the available space.

.item {
  flex-grow: 1;
}

flex-shrink

The flex-shrink property specifies how much an item should shrink if the available space is too small. The value is a unitless number that represents the proportion of the item’s original size that it should shrink by. For example, if an item has a flex-shrink value of 1 and the available space is too small, that item will shrink by the same amount as the other items in the container.

.item {
  flex-shrink: 1;
}

flex-basis

The flex-basis property specifies the initial size of an item before any available space is distributed. The value can be a length or a keyword such as auto or content. If the value is auto, the item’s size will be based on its content. If the value is content, the item’s size will be based on its content and padding.

.item {
  flex-basis: 100px;
}

flex

The flex shorthand property is a combination of flex-grow, flex-shrink, and flex-basis. The values are specified in the following order: flex-grow, flex-shrink, flex-basis.

.item {
  flex: 1 1 100px;
}

align-self

The align-self property specifies the alignment of an individual item along the cross-axis of the flex container. The value can be auto, flex-start, flex-end, center, baseline, or stretch.

.item {
  align-self: center;
}