align-content

Definition

In CSS, align-content is a property that defines how the browser distributes space between and around 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.

Example

Here are some examples of how align-content can be used:

.container {
  display: flex;
  align-content: 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-content: 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-content: center;
}

This will center the flex items within the flex container.

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

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

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

This will distribute the flex items evenly within the flex container, with equal space between them.

.container {
  display: flex;
  align-content: space-around;
}

This will distribute the flex items evenly within the flex container, with equal space around them.

Note that align-content only has an effect on flex containers with multiple lines of flex items. If the flex container has only one line of flex items, align-content has no effect.

Values

Best Practices

Use align-content to align a group of flex items within a flex container. It has no effect on single flex items. Use align-content to distribute the space between flex items evenly. Use align-content to align the flex items to the start, end, or center of the flex container. Use align-content to stretch the flex items to fill the flex container. Use align-content in combination with align-items to achieve the desired alignment of flex items within a flex container. Here is an example of how align-content and align-items can be used together:

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

In this example, the flex items within the .container element will be distributed evenly within the flex container, with equal space between them, and they will be vertically centered within the flex container.

Browser Compatibility

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

You can use align-content in your web projects without worrying about browser compatibility issues. However, if you need to support older browsers that do not support align-content, you can use a feature detection library like Modernizr to detect whether the align-content 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-content support:

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

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