Code has been added to clipboard!

Making CSS Align Content

Reading time 2 min
Published Aug 8, 2017
Updated Jan 21, 2020

The CSS align-content property

In CSS3, the align-content property was introduced. It allowed the developers to modify the way the content of a flex container is displayed vertically (on the cross axis):

Example
div {
    width: 80px;
    height: 350px;
    border: 2px solid #41caf4;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-flex; 
    display: flex;
    -webkit-align-content: left;
    align-content: left;
}

While it might seem similar to the align-items property, it aligns the flex lines instead of the items:
Css Align Content

align-content: CSS syntax

The syntax for the CSS align-content property is simple – all you need to define is the property value:

align-content:value;

You can find all the available values for flex alignment in the table below.

Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

Property values

Value Description
flex-start Packs the lines to the start of the flex container
center Packs the lines to the center of the flex container
flex-end Packs the lines to the end of the flex container
space‑between Distributes the lines evenly with the first line at the start and the last one at the end of the flex container
space‑around Distributes the lines evenly with equal spaces in-between
stretch Stretches the lines to occupy all the space. The default value.
initial Returns the default value
inherit Inherits the value from the parent element

Note: you can't make CSS align content if you only have a single line in the container: there has to be more free space than the content occupies.

Browser support

Browser image
Chrome
29+
Browser image
Edge
12+
Browser image
Firefox
20+
Browser image
IE
11+
Browser image
Opera
12.1+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
29+
Browser image
Firefox
20+
Browser image
Opera
12.1+
Browser image
Safari
9+

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 19/01/2021
3176 People Used
Only 97 Left
Rating
5.0