1. css
  2. /properties
  3. /align-items

align-items

Definition

In CSS, align-items is a property that defines how the browser aligns elements along the cross-axis of a flex container, which is the vertical axis by default. It has no effect on the main-axis, which is the horizontal axis.

Examples

Here are some examples of how the different values of align-items can be used:

.container {
  display: flex;
  align-items: flex-start;
}

This will align the flex items to the start of the flex container, which is equivalent to the top for a flex container with a vertical orientation.

.container {
  display: flex;
  align-items: flex-end;
}

This will align the flex items to the end of the flex container, which is equivalent to the bottom for a flex container with a vertical orientation.

.container {
  display: flex;
  align-items: center;
}

This will center the flex items within the flex container.

.container {
  display: flex;
  align-items: stretch;
}

This will stretch the flex items to fill the flex container.

.container {
  display: flex;
  align-items: baseline;
}

This will align the flex items along their baselines.

Values

ValueDescription
flex-startAligns the flex items to the start of the flex container (top for a vertical orientation)
flex-endAligns the flex items to the end of the flex container (bottom for a vertical orientation)
centerCenters the flex items within the flex container
stretchStretches the flex items to fill the flex container
baselineAligns the flex items along their baselines

Best Practices

Here are some best practices for using align-items:

  1. Use align-items to align a group of flex items within a flex container. It has no effect on single flex items.
  2. Use align-items to align the flex items to the start, end, or center of the flex container.
  3. Use align-items to stretch the flex items to fill the flex container.
  4. Use align-items to align the flex items along their baselines.
  5. Use align-items in combination with justify-content to achieve the desired alignment and distribution of flex items within a flex container.

Here is an example of how align-items and justify-content can be used together:

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Compatibility

align-items is a CSS property that is supported in all modern browsers, including Internet Explorer 11.

You can use align-items in your web projects without worrying about browser compatibility issues. However, if you need to support older browsers that do not support align-items, you can use a feature detection library like Modernizr to detect whether the align-items property is supported, and provide a fallback solution if it is not.

Here is an example of how you can use Modernizr to detect align-items support:

if (Modernizr.cssalignitems) {
  // The browser supports align-items
  // Use align-items in your CSS as needed
} else {
  // The browser does not support align-items
  // Use a fallback solution or polyfill as needed
}

Note that align-items is only supported in flexbox layouts. If you are using a layout method that does not support flexbox, align-items will not be available. }