Align Items in CSS

The align-items property is used within a flex container to control how its flex items are aligned vertically along the cross-axis, which is perpendicular to the main axis of the flex container. The main axis is determined by the flex-direction property (either horizontal or vertical).

Syntax:

align-items: normal | streach | positional alignment |  flex-start | flex-end | baseline | 
		initial | inhert ;

Properties of Align-items in CSS

Among the essential properties of Flexbox, align-items are a fundamental attribute that enables the precise control of vertical alignment within flex containers.

The layout is governed by two main axes: the main axis and the cross-axis. The main axis is determined by the flex-direction property, which can be either row or column-based. The cross-axis is perpendicular to the main axis and serves as the basis for vertical alignment when utilizing the align-items property.

The align-items property is specifically employed to control how flex items are aligned vertically along the cross-axis within a flex container. It offers a range of values, each influencing the alignment behaviour:

1. Stretch (Default):

The default value, stretch, causes flex items to fill the entire cross-axis of the container. If no explicit height is set on the items, they stretch to match the height of the tallest item. This behaviour is beneficial when aiming for uniformity in item heights.

2. Flex-start:

When align-items is set to flex-start, the items align at the start of the cross-axis. In other words, they are aligned to the top of the container. This alignment mode is beneficial when dealing with vertical headers or navigation bars.

3. Flex-end:

In contrast to flex-start, flex-end aligns the items at the end of the cross-axis, akin to aligning them at the bottom of the container. This is valuable for creating footers or placing content at the bottom of a container.

4. Center:

The centre value centres the items along the cross-axis, giving the layout a balanced and aesthetically pleasing appearance. This mode is suitable for the vertical alignment of items within content sections.

5. Baseline:

Baseline alignment aligns the items based on their textual baselines. This is particularly useful when dealing with text elements of varying sizes, ensuring that the text appears consistent across items.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .flex-container {
    display: flex;
    align-items: center; /* Align items vertically at the center */
    height: 300px;
    border: 1px solid #ccc;
  } 
  .flex-item {
    padding: 20px;
    border: 1px solid #333;
  }
</style>
<title>Align Items Example</title>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </div>
</body>
</html>

In this example, we have a flex container with three flex items inside. The align-items: center; property in the .flex-container selector aligns the flex items vertically at the center of the cross-axis. The height property ensures that the container has a specified height of 300px.

Each flex item has padding and a border to make them visually distinct. You can experiment with different values for the align-items property (such as flex-start, flex-end, baseline, or stretch) to see how they affect the vertical alignment of the items within the container.

Uses of Align-items

Vertical Centering: The align-items: centre; value is precious when aiming to achieve precise vertical centring of elements within a container. This is crucial in various contexts, such as vertically aligning text within buttons or ensuring that icons are centred vertically alongside text.
Uniform Heights: The align-items: stretch; value facilitates the creation of uniform heights for flex items. This is particularly useful when designing grids or card-based layouts where consistent visual alignment enhances the overall design aesthetics.
Vertical Navigation: In navigation menus that are oriented vertically, the align-items property can be employed to align menu items at the top, centre, or bottom of the container, depending on the desired visual effect and user experience.
Responsive Design: Align items play a vital role in responsive design. By adjusting the alignment based on screen size, designers ensure that content remains aesthetically aligned even as layouts adapt to different devices and orientations.

Drawbacks:

Limited to Flex Containers: One significant limitation of the align-items property is that it can only be used within flex containers. While Flexbox provides remarkable flexibility for arranging items, there might be scenarios where an alternative layout technique, such as CSS Grid, is more suitable.
Cross-Axis Alignment: The align-items property only affects the alignment of items along the cross-axis. For complete control over both horizontal and vertical alignment, designers often need to combine align-items with the justify-content property for the main axis alignment.
Browser Compatibility: As with any CSS property, browser compatibility is considered. While Flexbox is widely supported, older browsers might only partially support specific values or behaviours of the align-items property.

Next TopicCSS Border Width

← prev next →