rick@tillitsdone.com

+66824564755

Scroll to discover

CSS align-content Mastering Flexbox Alignment

Learn about CSS align-content for flexbox and grid layouts.

Control the distribution of space between items with options like start, center, space-between, and more.

CSS `align-content` Property

Introduction

The CSS align-content property is an essential tool for web developers to control the space between and around items in a container. It’s particularly useful in flexbox and grid layouts, helping to manage the alignment of items along the cross axis (in flexbox) or the block axis (in grid or block-level elements). This property allows you to fine-tune your layout, ensuring elements are neatly arranged.

Specification

The align-content property is defined in several CSS modules:

CSS Box Alignment Module Level 3: This module explains how align-content works and its various values. Check out the CSS Box Alignment Module Level 3 for more details.
CSS Flexible Box Layout Module Level 1: This module focuses on using align-content within flexbox layouts. For more information, see the CSS Flexible Box Layout Module Level 1.

These specifications ensure the property works consistently across different browsers and platforms.

Description

The align-content property helps manage the distribution of space between and around items in a flexbox or grid container. It’s particularly useful when there’s extra space along the cross axis (in flexbox) or the block axis (in grid or block-level elements). By adjusting align-content, you can control how rows or columns of items are aligned within the container.

This property only takes effect when there is more than one line of items in the container. In single-line flex containers (flex-wrap: nowrap), this property has no impact. However, in multi-line flex containers or grid layouts, align-content can be used to achieve various alignment effects, such as centering items, distributing them evenly, or aligning them to the start or end of the container.

Syntax

align-content: value;

Possible Values

Normal Alignment
- normal
Basic Positional Alignment
- start
- center
- end
- flex-start
- flex-end
Baseline Alignment
- baseline
- first baseline
- last baseline
Distributed Alignment
- space-between
- space-around
- space-evenly
- stretch
Overflow Alignment
- safe
- unsafe
Global Values
- inherit
- initial
- revert
- revert-layer
- unset

Example

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

In this example, flex items will be centered along the cross axis within the container.

Values

Normal Alignment

normal: Default value. Items are packed in their default position.

Basic Positional Alignment

start: Items align to the start edge of the container.
center: Items are centered within the container.
end: Items align to the end edge of the container.
flex-start: Items align to the flex container’s cross-start side.
flex-end: Items align to the flex container’s cross-end side.

Baseline Alignment

baseline: Aligns items based on their baseline.
first baseline: Aligns items based on the first baseline set.
last baseline: Aligns items based on the last baseline set.

Distributed Alignment

space-between: Distributes items evenly, with the first item at the start and the last item at the end.
space-around: Distributes items evenly, with half-space at the start and end.
space-evenly: Distributes items evenly, with equal space around each item.
stretch: Stretches items to fill the container.

Overflow Alignment

safe: Prevents data loss by aligning items safely.
unsafe: Allows alignment that may cause data loss.

Global Values

inherit: Inherits the value from the parent element.
initial: Sets the value to its initial value.
revert: Reverts the value to the user agent’s default.
revert-layer: Reverts the value to the previous value in the cascade.
unset: Resets the value to its natural value.

Examples

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS align-content Examples</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            height: 300px;
            border: 1px solid black;
            margin-bottom: 20px;
        }
        .item {
            background-color: lightblue;
            margin: 10px;
            padding: 20px;
            text-align: center;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="container" id="example1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="container" id="example2">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="container" id="example3">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="container" id="example4">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>

CSS Examples

Example 1: `align-content: start`

#example1 {
    align-content: start;
}

Items are aligned to the start edge of the container.

Example 2: `align-content: center`

#example2 {
    align-content: center;
}

Items are centered within the container.

Example 3: `align-content: space-between`

#example3 {
    align-content: space-between;
}

Items are evenly distributed, with the first item at the start and the last item at the end.

Example 4: `align-content: space-around`

#example4 {
    align-content: space-around;
}

Items are evenly distributed, with half-space at the start and end.

Visualizing the Examples

Copy the HTML and CSS code into your development environment and open the HTML file in a browser to see how each align-content value affects the layout. Experimenting with different values will help you create dynamic and visually appealing layouts for your web designs.

Browser Compatibility

Desktop Browsers

Google Chrome: Supported since version 21.0 (July 2012).
Firefox: Supported since version 28.0 (March 2014).
Internet Explorer: Supported since version 11.0 (October 2013).
Edge: Supported since version 12.0 (July 2015).
Opera: Supported since version 12.1 (November 2012).
Safari: Supported since version 9.0 (September 2015).

Mobile Browsers

Android Chrome: Supported since version 128.
Android Firefox: Supported since version 127.
Android WebView: Supported since version 4.4.
iOS Safari: Supported since version 7.0-7.1.

Browser Compatibility Table

Browser	Version	Release Date
Google Chrome	21.0	July 2012
Firefox	28.0	March 2014
Internet Explorer	11.0	October 2013
Edge	12.0	July 2015
Opera	12.1	November 2012
Safari	9.0	September 2015
Android Chrome	128	-
Android Firefox	127	-
Android WebView	4.4	-
iOS Safari	7.0-7.1	-

Notes on Compatibility

Partial Support: Older browser versions may have partial support.
Fallbacks: Use fallbacks for better compatibility.
Vendor Prefixes: May need vendor prefixes for older browsers.

Resources for Compatibility

Check Can I Use for the latest compatibility information.

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms

CSS align-content Mastering Flexbox Alignment

CSS `align-content` Property

Introduction

Specification

Description

Syntax

Possible Values

Example

Values

Normal Alignment

Basic Positional Alignment

Baseline Alignment

Distributed Alignment

Overflow Alignment

Global Values

Examples

HTML Structure

CSS Examples

Example 1: `align-content: start`

Example 2: `align-content: center`

Example 3: `align-content: space-between`

Example 4: `align-content: space-around`

Visualizing the Examples

Browser Compatibility

Desktop Browsers

Mobile Browsers

Browser Compatibility Table

Notes on Compatibility

Resources for Compatibility

See Also

Related Guides and Tutorials

Related Articles and Resources

Talk with CEO

CSS align-content Mastering Flexbox Alignment

CSS align-content Property

Introduction

Specification

Description

Syntax

Possible Values

Example

Values

Normal Alignment

Basic Positional Alignment

Baseline Alignment

Distributed Alignment

Overflow Alignment

Global Values

Examples

HTML Structure

CSS Examples

Example 1: align-content: start

Example 2: align-content: center

Example 3: align-content: space-between

Example 4: align-content: space-around

Visualizing the Examples

Browser Compatibility

Desktop Browsers

Mobile Browsers

Browser Compatibility Table

Notes on Compatibility

Resources for Compatibility

See Also

Related Guides and Tutorials

Related Articles and Resources

Talk with CEO

CSS `align-content` Property

Example 1: `align-content: start`

Example 2: `align-content: center`

Example 3: `align-content: space-between`

Example 4: `align-content: space-around`